Free Online CSS Gradient Generator
Design linear or radial gradients visually and copy the ready-to-use CSS.
Use the generated background on any element. Add a fallback background color for very old browsers.
About the CSS Gradient Generator
A CSS gradient is a smooth transition between two or more colors, created by the browser without an image file. Gradients are perfect for hero sections, buttons, cards, and backgrounds because they stay sharp at every screen size and add almost nothing to page weight.
Linear vs radial gradients
- Linear gradients blend colors along a straight line. Change the angle to control the direction.
- Radial gradients blend outward from a center point. Choose a circle or ellipse and move the starting position.
How to use the generator
- Choose a gradient type and adjust the angle or shape.
- Pick each color and drag its stop position.
- Add more color stops for richer blends.
- Copy the generated CSS into your stylesheet.
Accessibility tip
If you place text over a gradient, check the contrast between the text and every part of the gradient. A subtle dark overlay can keep text readable across the whole area.
Frequently asked questions
Can I use more than two colors?
Yes. Add up to six color stops. Each stop has its own color and position.
Do gradients work in email?
Support is inconsistent in email clients. Use a solid fallback color and test the message before sending.
Can I animate a gradient?
CSS gradients themselves are not easily animated, but you can animate background-position or use a larger background size for a moving effect.