How to make a CSS gradient
A practical guide to gradient syntax, colour stops, angles and browser-ready background CSS.
Open the linear gradient generatorStart with a gradient function
CSS provides linear-gradient(), radial-gradient() and conic-gradient(). Each function creates an image that can be assigned to background or background-image without adding an image file.
.example {
background-image: linear-gradient(120deg, #5b5cf0, #d946ef, #ff8a4c);
}Add and position colour stops
Each colour can include a position. A stop at 0% begins at the start of the gradient and a stop at 100% sits at the end. Intermediate stops shape the timing and balance of the blend.
background: linear-gradient(90deg, #5b5cf0 0%, #d946ef 48%, #ff8a4c 100%);Choose a direction or origin
Linear gradients use an angle or a direction such as to right. Radial and conic gradients use an origin such as at 30% 40%. Moving the origin is an effective way to place light or colour behind page content.
Use the gradient in a component
Apply the declaration to a class, pseudo-element or custom property. Keep foreground text readable at every point in the gradient and test the component at its smallest intended size.