CSS Gradient Generator
Design gradients visually, then copy production-ready CSS.
Type
Color stops
What is this tool?
CSS gradients blend colors along a line or radius. This generator supports linear and radial types, adjustable angles, and add/remove color stops with live preview and copyable CSS.
How to use it
- Choose linear or radial, set angle for linear gradients.
- Add, remove, and position color stops.
- Copy the generated background CSS.
Related design tools
- Color ConverterConvert between HEX, RGB, HSL, and HSB/HSV with a live swatch.
- CSS Box Shadow GeneratorTune offset, blur, spread, color, and layered shadows visually.
- CSS Border Radius GeneratorControl each corner’s radius and copy the CSS.
- Favicon GeneratorUpload an image and export standard favicon PNG sizes (and a ZIP).