This midnight to pink to mint 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.62:1

WCAG AA friendly

Black text

6.64:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #000718 0%, #ef0080 50%, #14eeb0 100%);
  background: linear-gradient(135deg, #000718 0%, #00081b 4.5%, #020c27 9.1%, #0b123a 13.6%, #221855 18.2%, #431d72 22.7%, #6c1e88 27.3%, #981c91 31.8%, #be158f 36.4%, #da0b88 40.9%, #ea0282 45.5%, #ef0080 50%, #f2027a 54.5%, #fa1064 59.1%, #ff2a37 63.6%, #ff5000 68.2%, #f97c00 72.7%, #d8a700 77.3%, #a8c800 81.8%, #75dd5d 86.4%, #48e88f 90.9%, #25eda8 95.5%, #14eeb0 100%);
  background: linear-gradient(135deg in oklch, oklch(13.06% 0.0430 255.01) 0%, oklch(61.70% 0.2503 359.67) 50%, oklch(84.23% 0.1736 165.58) 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.