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.
Gradient examples and when to use each type
/* Linear: smooth diagonal background */
background: linear-gradient(135deg, #6366f1, #ec4899);
/* Radial: soft spotlight behind a product */
background: radial-gradient(circle at center, #ffffff, #e5e7eb);
/* Conic: a pie or colour wheel */
background: conic-gradient(#22c55e 0 40%, #f59e0b 40% 70%, #ef4444 70%);
/* Hard edge: two colours with no blend */
background: linear-gradient(90deg, #111827 50%, #f9fafb 50%);Which type fits which job
- Linear is the all-rounder for buttons, banners and page backgrounds.
- Radial draws attention to the centre, which suits hero sections and product shots.
- Conic is great for simple pie charts, progress rings and colour wheels without any JavaScript.
Tips
- Pick colours that sit close together on the colour wheel for a calm look. Opposite colours can turn muddy in the middle.
- Check text contrast at both ends of the gradient, not just in the middle.
- For gradient text, use the gradient as the background and add
background-clip: textandcolor: transparent.
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.