CSS Gradient Generator
Build CSS gradients with unlimited color stops. Supports linear, radial, and conic gradient types. Choose from curated presets or design your own with a visual color-stop editor. Copy production-ready CSS.
.element { background: linear-gradient(135deg, #3b82f6 0%, #a78bfa 100%); }
About CSS Gradient Generator
CSS gradients are the foundation of modern UI backgrounds — hero sections, button states, dividers, glassmorphism, and countless other effects rely on them. This generator supports all three CSS gradient types (linear, radial, conic) with unlimited color stops, five curated presets (Sunset, Ocean, Purple Haze, Aurora, Instagram), and a visual stop editor where you drag positions and pick colors.
Linear gradients are the most common (color transitions along a straight axis). Radial gradients emanate from a center point outward. Conic gradients sweep around a center point like a pie chart — great for spinner backgrounds, color wheels, and creative dividers. All three formats support unlimited stops with per-stop position and color, letting you build multi-color transitions like the Instagram brand gradient in seconds.
How to Use
Choose linear, radial, or conic gradient type.
For linear/conic: set the angle (0° = up, 90° = right, 180° = down, 270° = left).
For radial/conic: set the position (center, top-left, etc.).
Add color stops with the + button. Adjust position (0-100%) and color for each.
Load a preset for inspiration, then tweak from there.
Frequently Asked Questions
What is the difference between linear, radial, and conic gradients?
Linear = colors along a straight line at a given angle. Radial = colors radiate from a center point outward. Conic = colors sweep around a center point like a pie chart. Linear is the most common; conic is powerful for pie charts, spinners, and color wheels.
How do color stop positions work?
Each stop has a position from 0% to 100%. The gradient interpolates linearly between adjacent stops. Multiple stops at the same position create hard color transitions. Overlapping stops (stop B before stop A when sorted) can create surprising effects — the tool auto-sorts by position.
Can I create gradients that transition through transparent?
Yes — use rgba() colors with alpha channels for stops. This tool uses hex colors but you can edit the output CSS to add transparency: linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) fades red to transparent.
What browsers support conic-gradient()?
All modern browsers since 2020 (Chrome 69, Firefox 83, Safari 12.1). If you support IE11 or ancient Android WebView, conic doesn't work — use linear as a fallback. Modern projects can use conic freely.