This graphite to violet to cyan 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

8.29:1

WCAG AA friendly

Black text

4.68:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #04232d 0%, #6133f8 50%, #24bed7 100%);
  background: linear-gradient(135deg, #04232d 0%, #012430 4.5%, #002839 9.1%, #002e49 13.6%, #003662 18.2%, #003c82 22.7%, #003fa4 27.3%, #1f3ec4 31.8%, #3e3bdc 36.4%, #5237ec 40.9%, #5d34f5 45.5%, #6133f8 50%, #5f37f9 54.5%, #5743fd 59.1%, #4854ff 63.6%, #286aff 68.2%, #0081ff 72.7%, #0096f9 77.3%, #00a7ee 81.8%, #00b2e4 86.4%, #00b9dc 90.9%, #17bdd8 95.5%, #24bed7 100%);
  background: linear-gradient(135deg in oklch, oklch(23.91% 0.0403 223.44) 0%, oklch(51.94% 0.2656 282.75) 50%, oklch(73.80% 0.1225 212.10) 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.