The Gradient Generator builds CSS gradients visually and hands you the exact code to paste into a stylesheet. Under the hood it writes the standard background-image functions: linear-gradient() for straight color transitions and radial-gradient() for circular or elliptical ones. You pick stops, set a direction, and the tool assembles a valid value like linear-gradient(135deg, #6a11cb 0%, #2575fc 100%).
The concept is simpler than it looks. A gradient is not a color; it is a generated image, which is why it lives in background-image (or the background shorthand) rather than background-color. Each color stop has a color and an optional position, and the browser interpolates between them. Linear gradients take an angle or a keyword like 'to right'; radial gradients take a shape (circle or ellipse) and a size keyword such as farthest-corner.
For working developers this beats hand-tweaking hex values and angles in a live-reload loop. A CSS gradient generator lets you see the interpolation in real time, nudge stop positions to control where the blend happens, then copy production-ready code. It is the fastest path from a design idea to a correct, cross-browser gradient string.
Building a gradient step by step
- 1
Choose the gradient type: linear for a directional blend across the box, or radial for a glow that spreads from a center point.
- 2
Add your color stops. Set each stop's color, and drag or type its position (0% to 100%) to control exactly where one color hands off to the next.
- 3
Set the direction. For a linear gradient pick an angle (0deg points up, 90deg points right) or a keyword like 'to bottom right'; for a radial gradient choose circle or ellipse and its origin.
- 4
Preview the result live in the swatch, then fine-tune stop positions until the transition sits where you want it.
- 5
Copy the generated CSS and drop it into your background-image or background property.
Where this comes in handy
Hero and section backgrounds
Give a landing page depth with a subtle two-stop linear gradient instead of a flat fill, no image asset or extra HTTP request required.
Buttons and call-to-action states
Layer a diagonal gradient on a button and shift the angle or stops on :hover for a tactile feel that stays crisp at any size.
Cards, avatars, and glow effects
A radial-gradient makes a natural spotlight or soft vignette behind a card or profile image, drawing the eye to the center.
Placeholders and loading skeletons
Animate a gradient's position to build shimmer skeletons while data loads, all in pure CSS with no JavaScript.
Pro tips and gotchas
- Gradients render into background-image, not background-color. If you set both, the image wins visually but keep a solid background-color as a fallback for very old browsers or when the gradient fails to parse.
- Watch for gray 'dead zones' when blending saturated complementary colors (e.g. blue to orange). sRGB interpolation passes through muddy midtones; add an intermediate stop or use the newer 'in oklch' / 'in hsl' interpolation hint for a cleaner path.
- Angle math trips people up: in CSS, 0deg points to the top and angles increase clockwise, which is the opposite of standard math convention. 'to right' equals 90deg, 'to bottom' equals 180deg.
- Repeat a color with two stops at the same position to create a hard edge or stripe (e.g. red 50%, blue 50%) instead of a smooth blend. repeating-linear-gradient() is the tool for regular stripe patterns.
- Text over gradients needs a contrast check. Because luminance varies across the gradient, test WCAG contrast against the lightest and darkest points, not just the average, to stay accessible.
Common questions
What is the difference between a linear and a radial gradient?+
A linear-gradient transitions colors along a straight line at a set angle, so the blend is directional. A radial-gradient spreads colors outward from a center point in a circle or ellipse, producing a glow or spotlight effect.
Which CSS property do I use for a gradient?+
Apply it to background-image, or to the background shorthand. Gradients are treated as generated images, so background-color cannot hold them, though it still works as a fallback.
How do I control the angle of a linear gradient?+
Pass an angle as the first argument, such as linear-gradient(45deg, ...). 0deg points up and values increase clockwise, or use keywords like 'to right' (90deg) and 'to bottom' (180deg).
Can I use more than two colors in one gradient?+
Yes. Add as many color stops as you need, each with an optional position; the browser interpolates smoothly between every adjacent pair, for example linear-gradient(90deg, red 0%, yellow 50%, green 100%).
Are CSS gradients supported in all browsers?+
Unprefixed linear-gradient() and radial-gradient() work in every modern browser. Only very old versions (IE9 and earlier) lack support, so gradients are safe for production today without vendor prefixes.
How do I make a gradient transparent or fade out?+
Use rgba() or hsla() colors with an alpha channel, or the transparent keyword, as a stop. For example linear-gradient(to top, rgba(0,0,0,0.6), transparent) fades a dark overlay to clear.