This purple to teal to gold 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

2.83:1

Needs overlay

Black text

11.39:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #960eff 0%, #1ed2ce 50%, #fff98f 100%);
  background: linear-gradient(135deg, #960eff 0%, #931aff 4.5%, #8a31ff 9.1%, #774cff 13.6%, #546bff 18.2%, #008bff 22.7%, #00a7ff 27.3%, #00bbf7 31.8%, #00c7e4 36.4%, #00ced7 40.9%, #00d1d0 45.5%, #1ed2ce 50%, #20d3cd 54.5%, #27d7ca 59.1%, #37dec3 63.6%, #54e5b7 68.2%, #79eda8 72.7%, #a1f299 77.3%, #c5f58f 81.8%, #e0f78c 86.4%, #f2f88c 90.9%, #fcf98e 95.5%, #fff98f 100%);
  background: linear-gradient(135deg in oklch, oklch(55.91% 0.2920 300.75) 0%, oklch(78.26% 0.1304 192.32) 50%, oklch(96.48% 0.1283 105.71) 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.