RunToolRunCSS Gradient Generator
Generate CSS gradient code.
How to Create CSS Gradients
Pick your colors
Choose two or more colors with the visual pickers.
Adjust type and angle
Switch between linear and radial, rotate the direction, reposition stops.
Copy the CSS code
Grab the ready background property and paste it into your stylesheet.
Linear, radial and conic
A linear gradient blends along a straight axis, a radial gradient outward from a point, and a conic gradient around one — which is what makes pie charts and colour wheels possible in pure CSS. All three are drawn by the browser, so they scale to any size without an image request.
That last point is the practical argument for using them. A gradient background as CSS costs a few dozen bytes and stays sharp at any resolution; the same gradient as an image costs a request and a download and blurs when stretched.
The muddy middle
Gradients interpolate in sRGB by default, and sRGB is not perceptually uniform. Blending between two saturated colours on opposite sides of the wheel — blue to yellow, red to green — passes through a desaturated grey in the middle rather than the vivid transition you expected.
The traditional fix is to add an intermediate colour stop at the midpoint, chosen by eye, which forces the path through the colour you actually want. Modern CSS can also interpolate in perceptually uniform colour spaces, which avoids the problem where support allows.
Banding, and why it appears
Smooth gradients across a wide area can show visible steps, because 8-bit colour channels only offer 256 levels per channel and a subtle blend across 1,000 pixels has more pixels than available shades.
It is most visible in dark areas and in large flat backgrounds, and it is worse on cheaper displays. Adding a very subtle noise texture over the gradient is the standard remedy — it breaks up the bands at a cost of a few kilobytes.
Hard stops and practical patterns
Placing two colour stops at the same position produces a hard edge rather than a blend, which is how stripes, split backgrounds and progress indicators are built from a single gradient declaration.
The other everyday pattern is a gradient to transparency, used to fade an image into a background or to make text legible over a photograph. Note that fading to `transparent` in some browsers passes through transparent black and produces a grey cast — fading to the same colour with zero alpha avoids it.
Keeping text readable
Text over a gradient has a different contrast ratio at every point, and the worst point is the one that matters. Checking the lightest and darkest ends against the text colour is the minimum; a semi-transparent overlay behind the text is the reliable solution when a gradient must sit behind content.
Everything is generated in your browser and the output is a CSS declaration you copy — no image, no request, no data leaving your device.