Quick answer: A CSS gradient blends two or more colors smoothly across an element's background, without an image file. This tool builds the code visually: pick colors, choose linear or radial, and set the angle for a linear gradient, with a live preview and the finished CSS ready to copy.
Pick two colors, or add a third, choose linear or radial, and set the angle for a linear gradient. The preview updates as you go, and the CSS background line is ready to copy underneath.
Linear vs radial
A linear gradient blends colors along a straight line at the angle you set: 90 degrees goes left to right, 180 degrees goes top to bottom. A radial gradient blends outward from the center in a circle and has no angle setting. Browsers have supported both for a long time, so the CSS this tool produces works in all current browsers without a vendor prefix.
A worked example
Example. Blue to purple at a 90-degree angle produces background: linear-gradient(90deg, #2b59ff, #7b2ff7);, ready to paste into a stylesheet.
Real-world examples
A landing page hero section uses a subtle two-color linear gradient at a shallow angle (around 100 to 120 degrees) instead of a flat color, adding depth without needing an image file to load.
A radial gradient centered behind a logo, fading from a brand color to transparent-feeling white, is a common way to draw attention to a central element without a hard edge.
Common mistakes to avoid
- Expecting a radial gradient to have a direction setting. It spreads outward from the center in every direction, so only linear gradients use an angle.
- Using colors with too little contrast. A gradient between two similar colors can look like a single flat color once rendered small.
- Forgetting the CSS still needs a background-color fallback for very old browsers, though this is rarely a concern for current sites.
Frequently asked questions
Does this work in all browsers?
Yes. The linear-gradient() and radial-gradient() CSS functions this tool produces are supported by all current major browsers without a vendor prefix.
Can I use more than three colors?
This tool supports up to three color stops. For more, add extra colors to the generated CSS by hand, separated by commas.
Why is there no angle option for radial gradients?
A radial gradient spreads outward from a center point in every direction, so an angle does not apply the way it does to a linear gradient.
Is the CSS copied to my clipboard automatically?
Press "Copy CSS" to copy it. Nothing is copied until you click the button.
People also search for this as: css gradient generator free, linear gradient generator, radial gradient css, gradient background generator, css gradient maker online, gradient code generator.
Sources and further reading
Formulas on this page are checked by automated tests against independent references. See how we test our tools.