CSS Gradient Generator
Create beautiful CSS gradients with a visual editor. Linear and radial gradients with live preview.
background: linear-gradient(90deg, #6366f1 0%, #a855f7 100%);Design stunning CSS gradients with our visual gradient generator. Supports linear and radial gradients, multiple color stops, and presets. Copy the generated CSS code with one click.
CSS gradients let you fill a background, border, or text with a smooth transition between two or more colors without shipping an image. The payoff is sharp rendering at any resolution, zero HTTP requests, and trivial tweaking. The catch is that writing them by hand means remembering the exact angle syntax, color-stop positions, and the difference between linear-gradient, radial-gradient, and conic-gradient — easy to get wrong when you're iterating on a visual.
This generator gives you a live preview while you drag color stops, change angles, and switch between linear and radial modes. The generated CSS is plain and copy-paste ready — no vendor prefixes you don't need, no unused keywords. Color stops are positioned in percentages so they scale predictably across container sizes.
Common uses are hero sections, button states, card backgrounds, and subtle overlays on top of imagery. Many designers also use gradients as masks via background-clip: text for colored headings, or as placeholder backgrounds while a real image loads.
- 1
Pick gradient type and direction
Choose linear or radial, then set the angle (for linear) or shape and position (for radial). The preview updates as you move the controls.
- 2
Add and position color stops
Click along the gradient bar to add a stop, then drag it to set its position. Use the color picker on each stop to set the exact hex, rgb, or hsl value.
- 3
Copy the CSS
Hit copy to grab the full background-image declaration. Paste it into your stylesheet or a style attribute and you're done.
Hero section backgrounds
Build a punchy brand-colored hero without shipping a JPEG. Two or three stops on a diagonal angle reads as modern without feeling gimmicky.
Button hover states
Swap a flat color for a subtle two-stop gradient on hover to add depth without relying on box-shadow.
Image placeholders
Render a gradient of the dominant colors while the real image loads, reducing layout shift and perceived load time.
Card and panel backgrounds
Use a soft same-hue gradient (e.g. slate-900 to slate-800) on cards to separate them from a flat body background.
What's the difference between linear and radial gradients?
Linear gradients transition colors along a straight line at an angle you specify. Radial gradients transition outward from a point, producing a circular or elliptical fade. Use linear for backgrounds and headers, radial for spotlights, vignettes, and glows.
Do I need vendor prefixes like -webkit-linear-gradient?
No. Every browser shipping for the last several years supports the unprefixed syntax. The prefixed versions are only needed if you're targeting very old mobile Safari or Android browsers, which is rarely worth the bytes today.
Can I use gradients on text?
Yes. Set background-image to your gradient, then apply background-clip: text and color: transparent (plus -webkit-background-clip: text for Safari). The text becomes a mask for the gradient.
Why does my gradient look banded?
Banding happens when two similar colors are spread across a large area with only 8-bit color depth. Add more intermediate stops, or use a slight noise overlay. Wide-gamut displays and CSS color-mix() also reduce the effect.
Can I animate a gradient?
You can't transition between two gradients directly, but you can animate background-position on a larger-than-container gradient to create motion, or use @property to register custom properties that interpolate smoothly.