This graphite to rose 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

7.04:1

WCAG AA friendly

Black text

6.60:1

WCAG AA friendly

Pre-rendered CSS output

.prismforge-gradient {
  background: linear-gradient(135deg, #282233 0%, #f30068 50%, #00e9c0 100%);
  background: linear-gradient(135deg, #282233 0%, #2a2336 4.5%, #31253e 9.1%, #3e284c 13.6%, #532b5d 18.2%, #702c6d 22.7%, #912a77 27.3%, #b22479 31.8%, #cf1b75 36.4%, #e30f6f 40.9%, #ef046a 45.5%, #f30068 50%, #f50661 54.5%, #fb1a49 59.1%, #ff3700 63.6%, #fd5c00 68.2%, #ea8700 72.7%, #c3ae00 77.3%, #90cb20 81.8%, #5cdc79 86.4%, #30e5a3 90.9%, #0ee8b9 95.5%, #00e9c0 100%);
  background: linear-gradient(135deg in oklch, oklch(26.65% 0.0322 300.42) 0%, oklch(61.75% 0.2472 8.22) 50%, oklch(83.31% 0.1588 173.79) 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.