This slate to emerald to gold radial 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

3.40:1

Needs overlay

Black text

11.80:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: radial-gradient(circle at 50% 45%, #005f58 0%, #13eca2 50%, #fff7a0 100%);
  background: radial-gradient(circle at 50% 45%, #005f58 0%, #00615a 4.5%, #00685f 9.1%, #007467 13.6%, #008672 18.2%, #009b7e 22.7%, #00b189 27.3%, #00c592 31.8%, #00d69a 36.4%, #00e39e 40.9%, #06eaa1 45.5%, #13eca2 50%, #24eca1 54.5%, #41ee9c 59.1%, #61f094 63.6%, #83f28b 68.2%, #a4f383 72.7%, #c3f481 77.3%, #dcf586 81.8%, #edf58f 86.4%, #f8f698 90.9%, #fdf79e 95.5%, #fff7a0 100%);
  background: radial-gradient(circle at 50% 45% in oklch, oklch(43.69% 0.0766 186.12) 0%, oklch(83.41% 0.1824 161.41) 50%, oklch(96.33% 0.1081 103.70) 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.