CSS gradient guide
Build a gradient you can use immediately
Choose a WebGradients preset, adjust its direction and color stops, then copy the resulting background declarations into your stylesheet.
How to create a CSS gradient
Start with linear, radial or conic. Set the direction or center, place between two and five color stops, and use the live preview to judge the transition before copying the code.
Linear, radial and conic gradients
Linear gradients follow an angle. Radial gradients spread from a chosen center as a circle or ellipse. Conic gradients rotate around their center, which works well for color wheels and angular fills.
How color stops work
Every stop pairs a color with a percentage. Stops can share a position to create a hard edge, or sit farther apart for a smoother blend. Drag a handle or use the numeric position for exact control.
Using the generated CSS
Paste both declarations into any selector. The solid background is a simple fallback; the gradient declaration supplies the finished background in modern browsers.
background-color: #ff9a9e;
background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 100%);Frequently asked questions
The practical details about CSS output, sharing and PNG export.
A CSS gradient is a browser-generated image that blends two or more colors. It can be used anywhere a CSS background image is accepted.