Gradient Generator
Build CSS linear and radial gradients visually. Add color stops, drag positions, set angle 0 to 360°, copy production-ready CSS with one click.
settingsSettings
paletteColor Stops
lightbulbDesign Tip
For a natural look, use analogous colors (neighbors on the color wheel) and keep stops evenly spaced. Add a mid-stop with a slightly lighter shade to create a subtle "glow" effect.
What is the Gradient Generator?
A CSS gradient generator builds the linear-gradient(...) or radial-gradient(...) declaration the browser needs, with a live preview so you can dial in colors and stop positions visually instead of guessing in code. The output is plain CSS, ready to paste into a stylesheet or design tool.
How to use the Gradient Generator
- 1
Pick gradient type
Linear runs colors along an angle. Radial fans out from the center. Switch between them anytime; settings stay.
- 2
Set the angle (linear only)
Drag the angle slider 0 to 360°. 90° goes left to right, 180° goes top to bottom, 0° bottom to top. 135° is the classic diagonal.
- 3
Add and adjust color stops
Each stop has a color picker and a position slider (0 to 100%). Click + to add a new stop, X to remove. Two stops minimum.
- 4
Copy the CSS
The background: linear-gradient(...) declaration appears below the preview. Copy it and paste into your stylesheet.
Frequently Asked Questions
What types of gradients are supported?
Two: linear gradients (color flows along a straight angle, 0 to 360°) and radial gradients (color radiates outward from the center). Both support unlimited color stops with adjustable positions. Conic gradients aren't included; they're rarer and have weaker browser support outside the very latest versions.
How do I copy the CSS code?
The full background: linear-gradient(...) (or radial) declaration appears under the preview, ready to paste into a stylesheet. Hit the copy icon and it goes to your clipboard. The output uses standard CSS that all modern browsers (Chrome, Firefox, Safari, Edge) accept without prefixes.
Can I add more than two colors?
Yes, as many as you need. Click the + button in the Color Stops panel to add a new stop with its own color picker and position slider. The minimum is 2 (you can't delete below that). Three to five stops are the practical sweet spot; more than that and the transitions get visually muddy.