This graphite to charcoal to aqua linear gradient is an editable CSS color system generated with OKLCH-aware perceptual interpolation, multi-stop fallback compilation, and Tailwind CSS utility export. It preserves chroma during transitions, reducing muddy gray midpoints while giving developers production-ready CSS and designers precise visual control.

Physics Preview Workspace

Perceptual CSS gradients without muddy midpoints.

Build layered linear, radial, conic, and mesh gradients using OKLCH, LAB, HCL, easing curves, blend modes, and fallback compilers.

White text

11.91:1

WCAG AA friendly

Black text

5.56:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #0b1d21 0%, #002300 50%, #00eaff 100%);
  background: linear-gradient(135deg, #0b1d21 0%, #0a1d21 4.5%, #071e21 9.1%, #021f21 13.6%, #002020 18.2%, #00221d 22.7%, #002318 27.3%, #002311 31.8%, #00230a 36.4%, #002304 40.9%, #002301 45.5%, #002300 50%, #002601 54.5%, #002f08 59.1%, #003f19 63.6%, #005732 68.2%, #007555 72.7%, #00957f 77.3%, #00b3a9 81.8%, #00cbce 86.4%, #00ddea 90.9%, #00e7fa 95.5%, #00eaff 100%);
  background: linear-gradient(135deg in oklch, oklch(21.73% 0.0250 213.82) 0%, oklch(22.19% 0.0755 142.50) 50%, oklch(85.59% 0.1465 206.33) 100%);
  background-blend-mode: normal;
}

Full-width inspiration gallery

120 mathematically tuned gradient collections.

Each preset links to an indexable dynamic route with deterministic related gradients, metadata, crawlable anchors, and editable OKLCH controls.