OneFreePlace
Developer Tools · #416
CSS Gradient Generator · Perceptual Studio

Design gradients that survive production.

Build layered linear, radial and conic gradients with modern color interpolation, hard stops, transition hints, repeating patterns, live browser support checks, progressive fallbacks and a visual rule audit — all locally in your browser.

6 gradient familiesOklab / OkLCh / P3Multi-layer composerFallback generatorNo signup · local
Perceptual gradients, production CSS.OneFreePlace Gradient Studio
Checking CSS…1 layer
Active layer stop rail · click to add · drag markers

Perceptual compare

same active layer

Text stress preview

Quick actions

Progressive CSS
Modern background-image
Legacy-compatible fallback
CSS custom properties
Text gradient snippet
Border-image snippet
Mask-image snippet
Tailwind arbitrary value


0visible layers
0color stops
—runtime support
—best stop-only text
The contrast check samples declared stop colors only; it is a design warning, not WCAG conformance for every interpolated pixel. Use Tool #403 for formal contrast checks against known colors.


Curated presets
single + layered gradients


Per-stop transition hints
A hint is an unlabeled midpoint position inserted between a stop and the next stop. Leave blank for the default midpoint.
Studio JSON
Portable local state for this tool. No account required.
Compatibility probes