CSS gradient generator
Build a gradient, copy the CSS background code or download it as an image up to 3840×2160.
Free · No sign-up · No watermark
Advertisement
Advertisement
Advertisement
How to use
- Choose linear, radial or conic, and set the angle or centre.
- Pick colors and move the stops, or start from a preset or a random gradient.
- Copy the CSS or download a PNG in the size you need.
CSS gradient generator
A linear gradient runs along an angle (90° is left to right), a radial gradient spreads out from a centre point, and a conic gradient sweeps around the centre like a colour wheel. The CSS code works in all current browsers.
The PNG download draws the same gradient on a canvas, so you can use it as a wallpaper, slide background or social media image. Gradients with very similar colors can show slight banding in 8-bit images.
Frequently asked questions
Can I use the CSS in Tailwind or other frameworks?
Yes. Use it as an arbitrary background value or in your own CSS.
How many colors can a gradient have?
Up to six color stops.
Advertisement
Is the PNG free to use?
Yes. You created it; there is no watermark or license restriction.
More PDF tools
Logo Maker20 logo ideas from your brand nameFavicon Generatorfavicon.ico and app icons from text or an imageQR Code GeneratorQR codes for links, Wi-Fi, email and phoneProfile Picture MakerRound profile photos with rings and coloursYouTube Thumbnail Maker1280×720 thumbnails with bold textSocial Media Image MakerInstagram, Facebook, X, LinkedIn and Pinterest sizesMeme GeneratorTop and bottom text on your own imageColor Palette GeneratorHarmonious palettes or colors from a photo