What is CSS Gradient Generator?
CSS Gradient Generator is a free visual tool that lets you build linear-gradient() and radial-gradient() CSS rules without writing a single line of code. Adjust colors, positions, angles, and shapes in real time — then copy the finished CSS rule directly into your project.
CSS gradients are pure CSS — no images, no external files. They render crisply at any screen resolution and size, load instantly, and can be animated with CSS transitions.
The Two Gradient Types
Linear
Colors sweep along a straight line. Controlled by angle (0–360°) or a named direction: to right, to bottom-right, etc.
Radial
Colors radiate outward from a focal point. You control shape (circle or ellipse) and the focal position within the element.
How to Use the CSS Gradient Generator
Choose a type
Select Linear or Radial. Linear is the default — good for backgrounds, buttons, and banners.
Add color stops
Click 'Add stop' to add up to 6 stops. Click any stop to change its color using the color picker.
Set positions
Drag each stop along the gradient bar to set where it sits (0% = start, 100% = end).
Adjust angle
For linear, drag the angle dial or type a value (90° = left to right, 180° = top to bottom).
Copy and paste
Hit Copy CSS — the full background property is in your clipboard, ready for your stylesheet.
Understanding the CSS Output
The tool generates standard CSS. Here are the two forms:
Linear gradient:
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #ec4899 100%);Radial gradient:
background: radial-gradient(circle at center, #6366f1 0%, #1e1b4b 100%);The values break down as:
135deg— angle for linear (orcircle at centerfor radial)#6366f1 0%— color stop: hex color followed by its position along the gradient
You can paste this directly as a background or background-image property on any element.
The Preset Library
Not sure where to start? The preset library gives you a set of curated gradients to use as-is or customize:
| Preset | Colors | Good for |
|---|---|---|
| Sunset | Orange → Pink → Violet | Hero backgrounds, cards |
| Ocean | Teal → Blue → Navy | Dashboard headers, charts |
| Aurora | Green → Teal → Blue | Dark mode UIs, banners |
| Brand | Violet → Purple | Buttons, CTAs, accents |
Click any preset to load it into the editor, then tweak from there.
Common Gradient Patterns
Full-page hero background:
body {
background: linear-gradient(135deg, #1e1b4b 0%, #312e81 50%, #4c1d95 100%);
min-height: 100vh;
}Button with hover shift:
.btn {
background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%);
transition: background 0.3s ease;
}
.btn:hover {
background: linear-gradient(90deg, #4f46e5 0%, #7c3aed 100%);
}Spotlight / vignette effect:
.card::after {
content: '';
background: radial-gradient(ellipse at top, rgba(99,102,241,0.3) 0%, transparent 70%);
}Tips & Common Mistakes
Start with 2 stops, add more if needed. Two well-chosen colors almost always look cleaner than four mediocre ones. Only add a third stop when you need to control the midpoint color explicitly.
Avoid near-identical hues across large areas. If your two colors are close on the color wheel, the middle of the gradient can look grey and muddy. Use the contrast checker to verify your colors have enough visual distance.
Use to right instead of 90deg in production. Named directions are easier to read in code review and less likely to break when you copy-paste. Both produce the exact same result:
Direction: named vs numeric
background: linear-gradient(to right, #6366f1, #8b5cf6);Readable — intent is obvious at a glance
background: linear-gradient(90deg, #6366f1, #8b5cf6);Numeric — same visual result, less readable
For dark UI gradients, go dark-to-darker, not dark-to-black. Pure black at one end kills vibrancy. Use deep navy or violet instead:
Dark gradient: navy vs black endpoint
background: linear-gradient(135deg, #4f46e5, #1e1b4b);Deep violet endpoint — rich, not flat
background: linear-gradient(135deg, #4f46e5, #000000);Pure black endpoint — vibrancy killed
Pair radial gradients with dark backgrounds. A subtle glow effect is hard to replicate any other way:
Radial glow on dark background
background: #0f172a;
background-image: radial-gradient(circle at 40% 40%, rgba(99,102,241,0.25) 0%, transparent 65%);Depth without any images or shadows
background: #0f172a;Flat — no visual depth
Related Tools
- Color Picker — find and copy individual hex, RGB, or HSL values
- Color Palette Generator — generate harmonious multi-color palettes
- Contrast Checker — verify your gradient colors meet WCAG accessibility ratios
- Box Shadow Generator — pair gradients with custom shadows for depth