Gradient Generator
Linear, radial, conic and mesh gradients with real OKLab interpolation, easing curves and film grain. The three things that make a gradient look expensive, in one place.
linear gradient
Click the bar to add a stop
3 stops · eased
Code
background-image: linear-gradient(160deg, #2a2f6b 0%, #30316c 6.5%, #40376e 13%, #583f71 19.5%, #754675 26%, #924d77 32.5%, #ab5279 39%, #bc547a 45.5%, #c2557a 52%, #c4597a 58%, #ca6379 64%, #d37378 70%, #dd8575 76%, #e79671 82%, #efa56c 88%, #f5af68 94%, #f7b267 100%);
Easing is applied by baking 8 stops per segment, so this snippet needs no modern colour support at all.
Shape
Angle160°
Selected stop
1 of 3
Position0%
Opacity100%
Blending
Interpolation
Easing
Easing is why a fade to transparent stops looking like it ends early. Extra stops are computed along the curve.
Smoothness8 per segment
Grainoff
A little noise breaks up the banding a wide gradient shows on an 8-bit display.
Perceptually even. The best default for two colors far apart.
Presets
01
Pick your stops
Click the bar to add a stop, drag to move it, and set color and opacity per stop.
02
Fix the middle
Interpolate in OKLab, ease the ramp, and add grain to dither out any banding.
03
Take the code
Copy CSS, Tailwind, SVG or JSON, or download the gradient as a PNG.
Questions
- Why does my gradient go grey or muddy in the middle?
- Because CSS interpolates in sRGB by default, and the straight line between two saturated colors in sRGB passes near grey. Switch interpolation to OKLab or OKLCH and the midpoint stays as bright as the ends. It is the single biggest improvement available to most gradients.
- What does easing actually change?
- A browser walks between two stops at a constant rate, which is why a fade to transparent looks like it stops early: the alpha falls off faster than your eye expects. Easing samples extra stops along a curve instead, so the fade reads as smooth. The extra stops are computed here and written into the output, so the result needs no special browser support.
- What is baked output?
- Modern CSS can say linear-gradient(90deg in oklch, ...) and let the browser interpolate. Baked output replaces that with a long list of literal color stops that were interpolated here instead. Same picture, works in every browser, and it is how any eased gradient has to ship.
- What is the grain slider for?
- Banding. A large, gentle gradient on an 8-bit display shows visible steps, because there simply are not enough colors between the two ends. A light layer of noise dithers those steps away. It is the same trick print has used for a century.
- What is mesh mode?
- Several soft radial gradients stacked on one background, which is how mesh gradients are done in plain CSS. Each blob has a color, a place and a reach, and the result exports as ordinary background-image layers.
- Which hue path should I use?
- It only applies to the polar spaces, OKLCH and HSL, and it decides which way around the color wheel the gradient travels. Shorter is the sane default. Longer goes the other way around and passes through every hue in between, which is how you get a rainbow from two colors.