CSS gradients are rendered by the browser rather than downloaded, so they scale to any size with no file to fetch and no pixelation. For backgrounds, buttons and overlays they are strictly better than an image.
How to use the Gradient Generator
- Choose linear or radial
- Pick your colours and adjust the direction
- Move the colour stops to control where the transition happens
- Copy the generated CSS
Linear and radial
Linear gradients run along a straight line. The direction comes first — an angle (135deg) or a keyword (to bottom right). 0deg points up, 90deg points right.
background: linear-gradient(135deg, #7c6cff, #38bdf8);Radial gradients spread outward from a point, useful for spotlights and soft background glows.
background: radial-gradient(circle at 30% 40%, #7c6cff, transparent);Colour stops let you control where each colour sits: linear-gradient(90deg, red 0%, yellow 30%, blue 100%) compresses the red-to-yellow transition into the first third.
Why gradients sometimes look muddy
Browsers interpolate in sRGB, which can route a transition through an unexpectedly grey midpoint. Blue to yellow is the classic offender — the midpoint comes out a dull grey rather than green.
Two practical fixes. Add an intermediate colour stop to steer the path through a hue you actually want. Or use colours that are near each other on the colour wheel, which avoids long interpolation paths entirely and generally looks more professional.
The other common problem is banding — visible stripes instead of a smooth blend, most noticeable on large areas with subtle colour changes. Greater contrast between the stops, or a very subtle noise overlay, both help.
Frequently asked questions
Are CSS gradients better than image backgrounds?
For solid colour transitions, yes — no HTTP request, no file size, infinitely scalable, and trivially themeable. Images remain necessary for photographic or complex textured backgrounds.
Why does my gradient look grey in the middle?
sRGB interpolation can pass through a desaturated midpoint, especially between complementary colours. Add an intermediate colour stop to steer the transition.
How do I apply a gradient to text?
Set the gradient as the background, then apply background-clip: text and color: transparent. Include the -webkit- prefixed properties for wider support.
Can I animate a gradient?
Not the colour stops directly — they are not animatable. The standard workaround is to make the background larger than the element and animate background-position, which produces a smooth moving effect.