About the CSS Gradient Generator
Gradients add depth and personality to buttons, hero sections, cards and backgrounds. The CSS Gradient Generator lets you build them visually instead of guessing values. Choose a linear, radial or conic gradient, set the angle, add up to eight color stops and move each stop to control where colors blend.
The generated code includes a solid fallback color for very old browsers followed by the gradient declaration, and it works in every modern browser without vendor prefixes. Need inspiration? Click Random for a fresh combination or pick one of the hand-picked presets, then fine-tune it to match your brand.
How to use the CSS Gradient Generator
- Choose the gradient type: linear, radial or conic.
- Adjust the angle and edit each color stop and its position.
- Add or remove colors, or try Random and the presets.
- Copy the CSS code into your stylesheet.
Frequently asked questions
Do CSS gradients work in all browsers?
Yes. Linear and radial gradients are supported by all modern browsers, and conic gradients are supported by all current versions of Chrome, Edge, Firefox and Safari.
How do I create a hard edge between colors?
Place two color stops at the same position, for example red 50% and blue 50%, to create a sharp line instead of a blend.
Can I use gradients on text?
Yes. Apply the gradient as a background, then add background-clip: text and color: transparent to the text element.