Home / CSS & color / CSS Gradient Generator
CSS Gradient Generator
Adjust two colours and an angle, watch the preview change, and copy a CSS line you can paste straight into a stylesheet. No images, no extra requests — the browser draws it.
How to use it
- Choose the two colours.
- Pick linear or radial and drag the angle slider.
- Copy the generated background property.
Examples
- 135° from deep blue to yellow gives the classic diagonal header.
- A radial gradient from a light centre to a darker edge creates a soft spotlight.
- Two very close colours make a subtle texture rather than an obvious stripe.
Questions people ask
Which way does the angle point?
0deg runs bottom to top and the angle increases clockwise, so 90deg goes left to right and 180deg goes top to bottom. It is the direction the gradient travels towards, not where it starts.
Why does my gradient look muddy in the middle?
Because two colours on opposite sides of the wheel pass through grey when blended. Choose colours nearer each other in hue, or add a third stop to steer the path through a colour you actually want.
Related tools
Updated: 2026-08-07