Local-first, alwaysA little guidance ↗

FIND THE BEAUTY IN BETWEEN.

CSS gradient
generator.

Create CSS gradients with 2–5 editable color stops, positions and angle controls. Compare OKLab and sRGB interpolation and copy fallback-ready CSS.

Somewhere
in between.
background: linear-gradient(110deg, #C5D9A7 0%, #8D79DF 50%, #F2B58F 100%);
background: linear-gradient(110deg in oklab, #C5D9A7 0%, #8D79DF 50%, #F2B58F 100%);

OKLab export includes a classic sRGB fallback. Text over a gradient needs contrast checks at each position.

FROM A COLOR TO A CLEAR DECISION

Create a CSS gradient with control over the middle

Build a linear CSS gradient from two to five colors. Adjust every stop, its position and the angle, then choose classic sRGB or perceptual OKLab interpolation. The modern export includes an sRGB fallback.

How to use this tool

  1. Choose the stop colors from the pickers or enter HEX values. Add or remove stops to keep between two and five.
  2. Set positions from 0–100% and adjust the direction. Stops are sorted by their positions when generating CSS.
  3. Switch interpolation to compare the transition, then copy CSS. Test text contrast on the rendered background in its actual context.

OKLab versus sRGB interpolation

A gradient is more than its endpoints. sRGB interpolation blends encoded channel values; OKLab interpolation blends perceptual lightness and color-opponent coordinates. The midpoint can therefore have a different brightness and color, even when the endpoints match.

Palunio exports the traditional gradient declaration first, then the version using in oklab. Browsers that do not support the interpolation syntax keep the earlier fallback. Verify the result in your target browsers rather than assuming every environment renders identically.

For a deliberate hard edge, give adjacent stops the same position. For a longer hold on one color, place another stop of that color farther along the line. A gradient’s text contrast can vary across a word; a single endpoint check is insufficient.

Method reference: CSS Color 4: interpolation. Read all calculation methods and limitations.

Common questions

Does the export include a browser fallback?

Yes. In OKLab mode, the export includes an sRGB linear-gradient declaration followed by the OKLab declaration. In sRGB mode it exports one declaration.

Are radial or mesh gradients supported?

This tool currently generates linear gradients. It does not advertise radial or mesh editing.

Can I place text on the generated gradient?

Yes, but assess contrast at all relevant background positions and responsive crops. An opaque text panel can make readability more predictable.