How to use the CSS Gradient Generator
- Choose linear or radial.
- Set the angle and colors.
- Drag each color's position.
- Copy the CSS.
What does this tool do?
The generated CSS includes a solid background color first as a fallback, then the gradient. All modern browsers support CSS gradients without prefixes.
Why use it?
- Hero sections and buttons.
- No image files needed.
- Up to six color stops.
Example
background: linear-gradient(135deg, #2c48d6 0%, #b02a6b 100%);
Privacy
Everything you type is processed in your browser. Nothing you enter is sent to our servers or stored by us. There's no account to create and nothing to install.
Frequently asked questions
Why does my gradient look gray or muddy in the middle?
Blending very different colors in the default sRGB color space passes through dull grays. Modern browsers let you blend in another space, such as linear-gradient(in oklch, …), which keeps the middle more vivid.
Can I animate a CSS gradient?
Gradients can't be transitioned directly. Common workarounds are animating background-position on an oversized gradient, or animating custom properties registered with @property.
Last reviewed by the M2Toolkit team.