CSS Gradient Generator
Design a linear gradient visually and copy the CSS in one click.
How to use
- Pick your two colors.
- Drag the angle slider to rotate the gradient.
- Copy the generated CSS and paste it into your stylesheet.
How the CSS Gradient Generator works
Builds CSS gradients visually and outputs the code, so you can tune colours and angle without a guess-and-refresh loop.
It emits standard CSS gradient functions. Linear gradients run along an angle; radial gradients spread from a point. Colour stops set where each colour lands along that axis.
linear-gradient(angle, color1 stop%, color2 stop%)
radial-gradient(shape at position, color1, color2)
Worked example
linear-gradient(90deg, #667eea 0%, #764ba2 100%) runs left to right between two colours.
Things worth knowing
- In CSS, 0deg points up and angles increase clockwise, so 90deg runs left to right.
- Gradients between complementary hues pass through muddy grey in the middle. Adding an intermediate stop in a related hue avoids it.
- A gradient is a background image, so it needs background or background-image, not background-color.
Frequently asked questions
How do I use a CSS gradient?
Paste the generated rule onto any element's background property, e.g. background: linear-gradient(...).
Can I change the direction?
Yes — the angle slider sets the gradient direction in degrees, from 0 to 360.
Why does my gradient look banded?
Sharp banding on wide areas comes from limited colour depth. A subtle noise overlay or an extra colour stop usually smooths it.
Can I animate a gradient?
Not the gradient itself in most browsers. Animate background-position on an oversized gradient instead.