CSS gradient generator
Edit colour stops, angle and type with a live preview, then copy the CSS.
Gradients you can see while you build them
CSS gradients replace background images with a few lines of code: faster to load, perfectly sharp at any size and easy to restyle. The syntax is compact and easy to forget, though: angles run clockwise from the top, stops can be positioned, and the three gradient types take different arguments. Experimenting with colours and positions beside a live preview is the quickest way to land on something that looks right.
Choose linear, radial or conic, set the angle or position, and edit the colour stops (colour and position as a percentage) in the list. The preview updates immediately and the CSS is ready to copy. You can add up to twelve stops, make the gradient repeating, and start from presets such as a sunset, ocean or mint blend. The tool warns about stops that overlap or are out of order, and about repeating gradients that have no length to repeat.
Design tips
- Gradients between very different hues pass through muddy greys; add a middle stop to control the path.
- Keep text contrast in mind: check the lightest and darkest parts of the gradient against the text colour.
- Subtle gradients (a few percent change in lightness) feel more modern than loud ones.
- Layer a gradient over an image using a comma-separated
backgroundlist to darken photos behind text.
Colours may be given as hex values or rgb() and are written as hex. Everything runs in your browser.
Frequently asked questions
What is the difference between linear, radial and conic gradients?
A linear gradient blends colours along a straight line at an angle, a radial gradient blends outward from a centre point in circles or ellipses, and a conic gradient sweeps colours around a centre like a pie chart or colour wheel.
How do I make hard stripes?
Give two adjacent colour stops the same position: #000 50%, #fff 50% makes an instant change. With a repeating gradient and pixel stops you can build stripes and checkerboards.
What does the angle mean?
For linear gradients, 0deg points up, 90deg points right, 180deg down and 270deg left. For conic gradients the angle is where the sweep starts, measured clockwise from the top.
Are gradients supported everywhere?
Linear and radial gradients work in every current browser without prefixes. conic-gradient is supported in all modern browsers as well.