How to make a CSS gradient
- Pick your two colors — or hit 🎲 Random until something clicks.
- Choose linear or radial and drag the angle slider; the preview updates live.
- Click Copy CSS and paste the
backgrounddeclaration into your stylesheet.
Gradients are back everywhere — hero sections, buttons, mesh-style backgrounds, social cards. Writing linear-gradient() by hand means guessing at angles and re-checking in DevTools; a visual preview gets you to the right blend in seconds. The generated code uses plain CSS supported by every modern browser, no vendor prefixes required.
Frequently asked questions
How do I use the generated CSS?
Click Copy CSS and paste the background declaration into any CSS rule — a hero section, button or card. It works in every modern browser with no prefixes needed.
What does the gradient angle mean?
The angle sets the direction the gradient travels: 0deg goes bottom-to-top, 90deg left-to-right, 180deg top-to-bottom. 135deg is the most popular choice for backgrounds.
When should I use radial instead of linear?
Radial gradients radiate from the center outward — great for spotlight effects, orbs and subtle vignettes. Linear gradients suit headers, buttons and full-page backgrounds.