About the CSS Gradient Generator
This tool builds CSS gradients visually and writes the code. It supports all three gradient types: linear-gradient() with an angle, radial-gradient() with a circle or ellipse shape and a center position, and conic-gradient() with a start angle, plus their repeating- versions for stripes and rings.
Add as many color stops as you need, set each stop's color and position, and reverse the order in one click. New stops go in the widest gap, colored halfway between their neighbors. Stops accept any CSS color, including rgba() and transparent for fades. You can also paste an existing gradient to edit it; the editor reads angles in deg or turn, to right style directions, and stops with one or two positions.
The output includes a solid fallback color before the gradient, for the rare browser or email client that can't render it.
How to use it
- Choose linear, radial or conic.
- Set the angle, or the shape and center.
- Edit the color stops, or start from a preset.
- Copy the CSS.
Examples
- Amber to violet: a diagonal two-color gradient.
- Radial spotlight: a glow from the top left corner.
- Diagonal stripes: two stops at the same position make a hard edge.
Common questions
How do I make a hard edge instead of a blend?
Give two stops the same position, as in the stripes example.
Which way does 0deg point?
Up. 90deg goes left to right and 180deg, the default, goes top to bottom.
How do I fade an image to transparent?
Use a gradient from rgba(0, 0, 0, 0) to a solid color, layered over the image as a second background.
Related tools
- Color Palette Generator: pick colors that work together.
- CSS Box Shadow Generator: add depth to the same element.