Most gradient tools show you the visual result but hide a detail that actually affects how the gradient looks: the color space it interpolates through. A gradient from red to green calculated in plain RGB passes through a muddy, desaturated brown in the middle — the two colors' RGB values average out to something that doesn't look like either. That "muddy middle" is the most common reason a designer-picked gradient looks worse in CSS than it did in their head, and it's a color-space problem, not a bad color choice. If you're placing text over the gradient, check contrast at both ends of it, not just one flat sample — see WCAG Contrast Ratios Explained.
The three gradient types, and when each fits
- Linear gradients run along a straight angle — the default choice for hero backgrounds, header fills, and button gradients, since the direction reads naturally in a UI.
- Radial gradients emanate from a focal point outward — useful for spotlight effects, glow accents, and circular UI elements where a directional gradient would look wrong.
- Conic gradients sweep around a center point like a clock face — the standard choice for pie-chart-style progress indicators and color-wheel pickers, a shape linear/radial gradients can't produce.
Getting clean multi-stop gradients
With 3+ color stops, position matters as much as color choice. Evenly-spaced stops (0%, 50%, 100%) give a predictable, symmetric blend; clustering stops closer together sharpens the transition at that point in the gradient, which is how you get a gradient with a crisp color band rather than everything blending smoothly. Each stop also supports RGBA values, so you can fade a color to transparent mid-gradient rather than blending to another solid color — useful for overlay gradients on top of images or video.
Common uses
- Full-screen gradient backgrounds for landing page heroes
- Subtle linear gradients adding depth to call-to-action buttons
- Soft radial glows behind key UI elements in dark-mode interfaces
- Conic gradients for progress rings and pie-chart-style indicators
FAQ
Why does my gradient look muddy or gray in the middle?
That's a color-interpolation artifact — blending two very different hues in plain RGB space passes through desaturated in-between colors. Picking colors closer together on the color wheel, or adding an intermediate stop with a color that bridges them, avoids the muddy transition.
How many color stops can I use?
Up to 8 stops per gradient, each independently positioned and colored.
Does the generated CSS work in all browsers?
Yes — output uses the standard linear-gradient()/radial-gradient()/conic-gradient() syntax, supported in all current browsers without vendor prefixes.
Can I use transparency in a gradient?
Yes — every color stop accepts RGBA, so you can fade to fully transparent as one of your stops rather than to another solid color.