CSS Gradient Generator
Create CSS gradients
Create CSS gradients Runs locally in your browser
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
About the
The CSS Gradient Generator builds a real linear or radial gradient from two colours and an angle, shows it full size, and hands you the CSS. The angle is the part people misread: in CSS, 0deg points upwards and the direction rotates clockwise, so 90deg runs left to right and 180deg runs top to bottom. Getting that wrong is why a gradient often looks upside down the first time. Both colours can carry an eight-digit alpha value, which is how you fade a gradient out over a hero image.
Where people use the
- Building a hero background that fades between two brand colours.
- Testing which angle looks right before committing to it in code.
- Producing a subtle vertical gradient for a card or a button.
- Creating a semi-transparent overlay that darkens a photograph.
How to use the
- 1
Pick the start and end colours
Use the colour picker or type a hex value. The preview and the CSS update as you change them.
- 2
Choose linear or radial
Linear runs across the box at a chosen angle. Radial spreads outwards from the centre as a circle.
- 3
Set the angle
Drag the slider from 0 to 360 degrees. Remember 0deg points up, 90deg points right, 180deg points down, 270deg points left.
- 4
Copy the CSS
The rule is a background declaration you can paste straight into a stylesheet, or into a background-image property if you prefer.
Tips and best practices
- Prefer a small luminance difference for backgrounds that carry text; it reads as texture rather than distraction.
- For text over a gradient, check contrast at the lightest and darkest points, not just the average.
- Keep gradients to two or three stops; more tends to look muddy.
Frequently asked questions
Which way does the angle point?
Zero degrees points towards the top of the element and the angle increases clockwise. So 90deg goes to the right and 180deg goes downwards. This is counter-intuitive if you are used to maths angles measured anticlockwise from the right.
Why does my gradient look banded?
Because two colours that are close in luminance produce visible steps on an 8-bit display, especially across a large area. Adding a subtle third stop, or using a slightly wider luminance range, usually hides it.
Can I use transparency?
Yes. Use an eight-digit hex value such as 667eea00 for fully transparent or 667eea80 for half, and the gradient will fade over whatever sits behind it.
Is the gradient supported everywhere?
Linear and radial gradients are supported in every current browser without a prefix. Vendor prefixes are only needed for very old versions of Safari and Android, which in practice means nothing built after about 2015.
Why does my gradient not show up?
Because the element has no height. A gradient is painted into the element's box, so an empty div collapses to zero height and shows nothing. Set a height or add content.
Does it generate more than two colour stops?
No, this tool handles two. For a multi-stop gradient, take the CSS it produces and add stops by hand; the syntax is simply more colour and percentage pairs separated by commas.