Zone 3

CSS Art Gallery

Every pixel is a style rule.

Golden Hour clip-path · linear-gradient

Geometric Fox border triangles · transform

Morning Ritual border-radius · box-shadow

The Watcher @property · radial-gradient

Alpine Night border triangles · clip-path

Spinning conic-gradient · @keyframes

The Craft

How CSS becomes art

No canvas. No WebGL. No image files. Every form above is built from a single element — or a handful — styled with pure CSS. These are the techniques.

Gradient Stacking

CSS allows multiple backgrounds on a single element. Layer linear-gradient, radial-gradient, and conic-gradient with precise stops to paint without pixels.

clip-path

clip-path: polygon() carves any shape from a rectangle. Triangles, diamonds, stars, mountains — all from a div and some coordinates.

Box-shadow Art

box-shadow accepts comma-separated shadows. Each one is a colored rectangle you can position anywhere — making a single div render hundreds of pixels.

Border Triangles

Zero-size elements with thick border values produce triangles. The classic trick: set three borders transparent and one with color.

conic-gradient

Sweeping colors from a center point. Hard stops create pie charts and vinyl record grooves. Soft stops produce color wheels and iridescent surfaces.

@property Animations

Register a CSS custom property as a typed value and the browser can interpolate it. Animate hue-rotate, gradient angles, or radial positions smoothly — things that were impossible before.

Border Triangle

.triangle {
  width: 0;
  height: 0;
  border-left:   40px solid transparent;
  border-right:  40px solid transparent;
  border-bottom: 70px solid #f472b6;
}

conic-gradient Vinyl

.record {
  background: conic-gradient(
    from 0deg,
    #111 0deg,
    #222 1deg,
    #111 2deg
  );
  border-radius: 50%;
  animation: spin 3s linear infinite;
}

@property Animation

@property --iris-hue {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}

.iris {
  background: radial-gradient(
    circle,
    oklch(0.5 0.3 var(--iris-hue)),
    oklch(0.3 0.2 var(--iris-hue))
  );
  animation: shift-hue 4s linear infinite;
}

@keyframes shift-hue {
  to { --iris-hue: 360deg; }
}

Interactive

Build a Shape — v2

Sculpt with 25+ properties. Try Challenge Mode for a target-matching game.