CSS Gradient Generator
Pick colours and an angle, watch the preview, and copy the background CSS.
CSS
Make a CSS Gradient Online
Gradient backgrounds are used for hero sections, buttons, cards and overlays on photos. This page opens the CSS Generator on its gradient tab, so you can try angles and colours by eye and copy the exact line of CSS.
Examples
| CSS | Result |
|---|---|
linear-gradient(90deg, #6c5ce7 0%, #00b894 100%) | Purple on the left to green on the right |
linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.6) 100%) | Dark fade at the bottom, used to keep text readable on a photo |
radial-gradient(circle, #ffffff 0%, #dfe6e9 100%) | Soft light spot in the centre |
conic-gradient(from 0deg, #e17055 0% 25%, #0984e3 25% 100%) | A quarter pie chart |
Tips
Colours close to each other on the colour wheel blend smoothly; opposite colours tend to turn grey in the middle, which an extra colour between them fixes. Keep text contrast in mind: check the lightest and darkest part of the gradient against the text colour.
Related tools
For shadows under the same element, see the box shadow generator. To convert a colour to HEX, RGB or HSL, use the colour converter.