CSS Gradient Generator
Build linear or radial CSS gradients visually with multiple color stops and a live preview.
Pick a gradient type, add color stops, and adjust the angle - the preview updates live and the CSS is ready to copy.
Pair this with the Color Palette Generator if you want harmonious colors to build your gradient from.
What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors, generated directly by the browser (no image file needed) using the linear-gradient() or radial-gradient() functions.
Why Use This Tool?
Getting a multi-stop gradient's angle and color-stop percentages right by typing CSS from scratch is fiddly - this tool lets you see the result update live as you adjust each value.
How to Use It
- Choose linear or radial.
- Add color stops and adjust their position.
- For linear gradients, set the angle.
- Copy the generated CSS
backgrounddeclaration.
Limitations
This covers standard linear and radial gradients - conic gradients and more advanced multi-layer gradient combinations aren't generated here.