Pick two to five colours, drag their positions, set the angle and watch the gradient update in the large preview. Switch between linear, radial and conic gradients, or press Random for fresh ideas. The CSS code underneath is ready to paste into your stylesheet and includes a solid colour fallback.
Gradients drawn with CSS are sharp on every screen, weigh nothing compared with an image and are easy to change later. Use them for hero sections, buttons, cards, text highlights and app backgrounds.
How to use the CSS Gradient Generator tool
- Choose Linear, Radial or Conic.
- Set the angle (or shape for radial gradients).
- Change each colour and drag its position slider. Add up to five colours.
- Copy the CSS code.
Why use ToolOrca CSS Gradient Generator
- Linear, radial and conic gradients
- Up to five colour stops with positions
- HEX input and colour picker
- Random gradient button
- Solid colour fallback in the CSS
- Large live preview
CSS gradient syntax
linear-gradient(135deg, #0f6fde 0%, #ff6b6b 100%) draws colours along a line at the given angle; 0deg points up, 90deg to the right. radial-gradient(circle, …) spreads colours out from the centre, and conic-gradient(from 0deg, …) sweeps them around the centre like a colour wheel or pie chart.
Gradients are images in CSS, so use them with background or background-image, not background-color. To put a gradient on text, combine it with background-clip: text and a transparent text colour.
Frequently asked questions
How do I add a gradient background in CSS?
Copy the code from this tool into your rule, for example body { background: linear-gradient(135deg, #0f6fde, #ff6b6b); }.
Do CSS gradients work in all browsers?
Linear and radial gradients work in every modern browser. Conic gradients work in all current versions of Chrome, Edge, Firefox and Safari.
Why does my gradient repeat or stop halfway?
If the element is shorter than the page, the gradient repeats. Add min-height: 100vh to the element or background-attachment: fixed.
Can I make a hard line instead of a smooth blend?
Yes. Put two colours at the same position, for example red 50% and blue 50%, to get a sharp edge.