Create CSS linear or radial gradients with a live preview.
Generated locally in your browser.
How do you generate a CSS gradient?
A CSS Gradient Generator outputs the CSS linear-gradient() or radial-gradient() function with your chosen colours and angle, with a live preview as you adjust. Linear gradients run along an angle; radial gradients spread out from the centre. For example, a 90° blue-to-violet gradient outputs “background: linear-gradient(90deg, #2563eb, #7c3aed);”, ready to copy into your stylesheet.
Understanding your result
Linear gradients run along an angle; radial gradients spread out from the centre.
Formula and method
The output uses the CSS linear-gradient() or radial-gradient() function with your colours and angle.
Assumptions and limitations
The tool outputs a standard linear-gradient or radial-gradient background declaration. It focuses on gradient generation and does not add vendor prefixes for very old browsers, manage colour stops beyond what the interface offers, or apply the gradient to text or borders — you place the copied code yourself.
Worked example
A 90° blue-to-violet gradient outputs “background: linear-gradient(90deg, #2563eb, #7c3aed);”.
How to use this tool
- Choose linear or radial.
- Pick the two colours and (for linear) the angle.
- Copy the CSS.
Common mistakes to avoid
- Using two very similar colours, which makes the gradient look flat.
About the CSS Gradient Generator
Design a CSS gradient and copy the ready-to-use background code, with a live preview as you adjust it.
Who should use this tool
Front-end developers and designers building backgrounds for buttons, hero sections, or cards. Anyone who wants to experiment with colours and angles visually rather than guessing CSS values, then copy production-ready code straight into a stylesheet without memorising the gradient syntax.
Benefits
- Live preview updates as you adjust colours and angle
- Outputs ready-to-paste linear or radial gradient CSS
- Lets you tune the direction visually, not by guesswork
- Generates the code locally in your browser
Practical use cases
- Designing a colourful background for a hero section
- Creating a subtle button gradient for a UI
- Prototyping a radial glow behind a card
- Copying gradient CSS straight into a stylesheet
Explore all Developer Tools tools
Frequently asked questions
Can I use it as a background?
Yes. Paste the generated rule onto any element’s background property.
What is the difference between a linear and a radial gradient?
A linear gradient blends colours along a straight line at a chosen angle, so the transition runs across the element edge to edge. A radial gradient blends outward from a central point in circles or ellipses. Use linear for directional fades and radial for spotlight or glow effects.
Does the angle in a CSS gradient start from the top?
Yes. In CSS, 0deg points straight up, and the angle increases clockwise, so 90deg points to the right and 180deg points down. This means a 90deg gradient runs from left to right. The angle sets the direction the colours transition along.