CSS Gradient Generator
Pick a gradient type, drag the colour stops and copy the CSS. The preview updates as you type, and nothing is sent to a server.
0%
100%
CSS
background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);
About this tool
A CSS gradient is an image the browser paints from colour stops, so it scales to any element size without a file download. Linear gradients run along an angle, radial gradients spread from a centre point, and conic gradients sweep around one — useful for pie-style rings and colour wheels.
Stop positions are percentages along that path. Two stops at the same position make a hard edge instead of a blend, which is how stripe and split-background effects are built. Every browser released since 2016 supports all three functions unprefixed.
Frequently asked questions
- What does the angle mean?
- 0deg points to the top, 90deg to the right, 180deg to the bottom. It is the direction the gradient travels, not the direction it comes from.
- How do I get a hard edge instead of a fade?
- Give two stops the same position, for example red 50% and blue 50%. The colour then switches without a blend.
- Can I use a gradient on text?
- Yes: set the gradient as background, then add background-clip: text and color: transparent to the same element.