CSS Gradient Generator
Build linear, radial or conic CSS gradients with a live preview and copy the code.
Runs in your browser Your input never leaves your device.
Blending in OKLab or OKLCH needs a recent browser (Chrome 111+, Safari 16.2+, Firefox 127+); older ones ignore that line, which is why a solid fallback color is included first. Runs in your browser.
Report a problem with this tool
About this tool
Design a CSS gradient visually and copy the code. Choose a linear, radial or conic gradient, set the angle or center, and add up to 12 color stops, each with its own color and position (leave a position empty and the browser spaces the stop evenly). The preview updates as you type, and the CSS below it is ready to paste: it starts with a plain background color from your first stop for very old browsers, then the gradient line. Colors can be written in any format the Color Converter understands, such as hex, rgb(), hsl() or a name. The Blend in option adds an `in oklab` or `in oklch` color-interpolation hint, which avoids the dull, grey middle that sRGB blending can give between bright colors; browsers that do not support it ignore that line and use the fallback. Presets, Reverse and Random buttons help you start. Repeating makes the pattern tile. Everything runs in your browser.
How to use it
- Pick a type and set the angle or center.
- Edit the color stops: change colors, set positions, add or remove stops.
- Try a preset, Reverse or Random for inspiration.
- Press Copy CSS and paste it into your stylesheet.
Common problems
- The gradient looks grey in the middle
- sRGB blending of two bright colors passes through a dull middle. Set Blend in to OKLab or OKLCH for a smoother, more vivid blend.
- Repeating does nothing
- A repeating gradient only repeats if the last stop is below 100%. Set the final position to something like 20% and the pattern will tile.
- The color I typed is rejected
- Use hex (#ff7a18), rgb(), hsl(), oklch() or a color name. The message under the stops says what was not understood.