KOEN

Pure CSS Art Gallery

LAB · PURE CSS ART

Browse 12 illustrations and animations drawn with only HTML and CSS, no images. Open any piece up close and copy its HTML, CSS or a ready-to-use single file.

EXHIBITION · 10 WORKS

Pictures drawn with nothing but HTML and CSS, no image files

Made with gradients, border-radius, clip-path and keyframes. Click any piece to see it up close and copy the code.

01 / 10

No.01

Artwork
HOW TO

How to use

  1. Browse 12 pieces drawn purely in CSS, and filter by All, Animated or Still at the top.
  2. Click a piece to view it large, then switch between the HTML, CSS and Single file tabs to read the code.
  3. Copy the code and paste it into your own page to get the same picture. The Single file tab can be saved as an .html file and opened as is.
  4. Use the ← → buttons or arrow keys to move between pieces, and press Pause animations at the top if the motion is distracting.
PAIRS WELL WITH

Pairs well with

FAQ

FAQ

Is it really drawn with CSS only, no images?

Yes. Each piece is a few divs plus CSS: gradients, border-radius, clip-path, box-shadow, mask, filter and keyframes. JavaScript is only used for the gallery itself (filtering, the code viewer and copying).

How do I change the size of a piece?

Every dimension is in em, so you only need to change the font-size of the outermost element. The default 16px gives 320×320px; 8px gives 160px and 24px gives 480px.

Will the copied code look the same on another page?

Class names use a per-piece prefix (like .sunset__sun), so they rarely clash with other styles. The pieces target current Chrome, Edge, Safari and Firefox; older browsers may render pieces that use mask or the individual translate property differently.

Won't the animations drain my battery?

Pieces scrolled out of view stop animating, and the Pause animations button stops them all. If Reduce Motion is on for your device, the gallery opens paused.