CSS Gradient Generator
Create beautiful CSS linear and radial gradients visually and copy the code. Free, instant.
What Is a CSS Gradient?
A CSS gradient is a smooth transition between two or more colors generated entirely by the browser — no image file is needed. Gradients are defined using CSS functions (linear-gradient() or radial-gradient()) and applied as a background property. Because they are pure CSS, they are infinitely scalable, load instantly with no network request, and can be animated or transitioned with CSS. Modern CSS gradients are supported in every major browser and are one of the most widely used design techniques on the web.
Linear vs Radial Gradients
| Type | Direction | Best for | Example |
|---|---|---|---|
| Linear | Along a straight line at any angle | Backgrounds, buttons, banners | linear-gradient(135deg, #667eea, #764ba2) |
| Radial | Outward from a central point | Spotlight effects, circular elements | radial-gradient(circle, #667eea, #764ba2) |
CSS Gradient Syntax
Generated CSS for a linear gradient:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
For radial:
background: radial-gradient(circle, #667eea 0%, #764ba2 100%);
Apply to any element as a background or background-image property. Gradients work on divs, buttons, hero sections, cards, overlays and more.
Tips for Great Gradients
- Use adjacent colors on the color wheel — analogous colors (e.g. blue to purple, orange to red) blend naturally without clashing.
- 135° is the classic diagonal — it looks polished on most cards and hero sections without being too predictable.
- Add a transparent stop for fade-in effects — use
rgba(0,0,0,0)ortransparentat one end to fade into the background. - Multi-stop gradients add depth — add a third or fourth color stop in the middle of a gradient to create richer, more unique blends.
- Dark overlay on photos — a gradient from
rgba(0,0,0,0.6)totransparenton top of a photo makes text legible without hiding the image.
Browser Support
CSS gradients are supported in all modern browsers (Chrome, Firefox, Safari, Edge) with no vendor prefix needed. They have been universally supported since 2013. You can use them on any production site without worrying about compatibility.