CSS gradient guide
Create a CSS gradient you can use immediately
This free online CSS gradient maker gives you a live preview while you choose a gradient type, adjust its direction and color stops, and copy the resulting background declarations into your stylesheet.
How to use the CSS gradient generator
Choose linear, radial or conic, set the direction or center, and add between two and five color stops. The preview updates as you edit so you can test the gradient before copying it.
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%);PNG export and sharing
Download the current gradient as a PNG sized for social preview, desktop or mobile wallpaper — rendered locally in your browser, not uploaded anywhere. Copy a share link to hand off the exact same editor state, colors and stops, to someone else.
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.
