How to create a CSS gradient
- Pick a preset to start, or use the default.
- Choose Linear, Radial or Conic. Set the angle for linear and conic gradients, or the shape and centre for radial ones.
- Edit colour stops: change colours, drag positions, add stops (up to eight) or remove them (minimum two).
- Click Copy CSS and paste it into your stylesheet.
Gradient types
A linear gradient blends colours along a straight line at the angle you choose: 0° goes bottom to top, 90° left to right, and 135° is the popular diagonal from top left. A radial gradient spreads from a centre point outwards as a circle or ellipse, which works well for spotlights and soft glows. A conic gradient sweeps colours around a centre, like a colour wheel or pie chart.
The generated code includes a solid background colour first, as a fallback for very old browsers and for when content loads, followed by the gradient. Stops are sorted by position automatically, so the output is always valid CSS that works in all modern browsers without vendor prefixes.
Where to use gradients
- Hero sections, banners and call-to-action areas.
- Buttons, cards and badges with subtle depth.
- Gradient text using
background-clip: text. - Placeholder backgrounds for images that are still loading.
CSS gradient FAQ
Do gradients slow down a website?
No. CSS gradients are drawn by the browser and are much lighter than background images.
How do I make a hard colour edge?
Put two stops at the same position with different colours, for example 50% and 50%.
Can I use transparency?
The colour picker uses solid colours. Edit the copied CSS and change a colour to rgba() or add an alpha value to the hex code, like #5b5ce280.