This black to pink to green 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.41:1

WCAG AA friendly

Black text

7.50:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #120209 0%, #ff0098 50%, #08ff95 100%);
  background: linear-gradient(135deg, #120209 0%, #15020b 4.5%, #1f0311 9.1%, #30031c 13.6%, #4b042d 18.2%, #6c0242 22.7%, #920058 27.3%, #b7006e 31.8%, #d60080 36.4%, #ed008e 40.9%, #fb0096 45.5%, #ff0098 50%, #ff0091 54.5%, #ff027c 59.1%, #ff1e51 63.6%, #ff4600 68.2%, #ff7600 72.7%, #fca600 77.3%, #cdcd00 81.8%, #97e700 86.4%, #61f66a 90.9%, #2ffd8b 95.5%, #08ff95 100%);
  background: linear-gradient(135deg in oklch, oklch(12.95% 0.0397 350.56) 0%, oklch(65.30% 0.2681 355.05) 50%, oklch(87.87% 0.2164 155.01) 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.