About the gradient maker
Build linear, radial and conic CSS gradients with up to 10 stops, then copy production-ready CSS. Every interpolation runs in OKLCH by default so you never get the muddy gray middle that linear sRGB gradients are famous for. Switch the interpolation hint to compare OKLCH against sRGB, LCH or LAB - the difference is small in code and huge on screen, especially when the endpoints have very different hues.
Drag a stop along the bar to reposition it, double-click to add a stop, right-click to remove. Each stop has its own easing function so you can craft the timing of the color change instead of just its endpoints. Conic and radial gradients let you set the center point and angle with a click on the canvas - useful for spotlight effects, button glows and the holographic ring effect popular on profile avatars.
For mesh-style multi-color backgrounds, drop colors anywhere on a 2D canvas in the mesh gradient tool. To learn when to reach for which gradient type, read Linear, Radial, Conic: Picking the Right CSS Gradient.
Related: Mesh Gradient · Duotone · Color Animation