CSS Gradient Generator
Drag the stops, pick an angle, copy the rule. Linear, radial and conic gradients with a live preview painted by the very CSS you take away - plus the colour spaces and easing the modern spec added, with a fallback written for you.
About the CSS Gradient Generator
This is a free CSS gradient generator: pick two colours, drag the stops, choose an angle, and copy the rule. Nothing is uploaded, nothing is installed, and the preview above is a real element with the generated CSS applied to it - so what you see is literally the code you take away.
A gradient in CSS is not an image. It is a function the browser evaluates while it paints, which means it scales to any size without going blurry, weighs a line of text instead of a few kilobytes, and can be edited by hand long after you leave this page. That is why a gradient background beats an exported PNG for almost every hero section, card and button on the web.
How to make a gradient
- Pick a type - linear travels along a line, radial spreads out from a point, conic sweeps around one.
- Click a stop on the bar to change its colour, or click anywhere on the bar to add a stop. Drag stops to move them; double-click to remove one.
- Set the angle with the dial, or drag the centre handle on the preview for radial and conic gradients.
- Copy the CSS, or switch the output to custom properties, an inline style or a React style object.
The CSS linear-gradient syntax, explained
Every gradient the tool writes is one CSS function. The most common is
linear-gradient(), and it reads like this:
background-image: linear-gradient(90deg, #6a11cb 0%, #2575fc 100%);The first value is the direction. Angles run clockwise
from straight up, so 0deg points to the top,
90deg to the right, 180deg to the bottom. The
eight cardinal directions can also be written as keywords -
to right, to bottom left - which is what this tool
emits when your angle lands on one, because it is easier to read later.
Everything after the direction is a colour stop: a
colour and, optionally, where it sits along the gradient line. Positions are
usually percentages, but any CSS length works. Leave them out and the
browser spreads the colours evenly, so
linear-gradient(red, blue) is the same as
linear-gradient(red 0%, blue 100%).
Midpoint hints
Between two stops you can write a bare percentage. That is a colour hint, and it moves the halfway point of the blend without adding a colour:
linear-gradient(90deg, #6a11cb 0%, 30%, #2575fc 100%)Here the two colours are still mixed 50/50, but that midpoint now happens at 30% instead of the middle - so the first colour gives way quickly and the second one lingers. It is a single token, it has been in the spec for years, and almost no generator exposes it. The small diamond between two stops on the bar above is exactly this: drag it, and double-click to re-centre.
Hard stops
Give a stop two positions and the colour holds all the way between them, which produces a crisp edge instead of a blend:
linear-gradient(90deg, #6a11cb 0 50%, #2575fc 50% 100%)That is how stripes, split backgrounds and progress bars are made without a single image. Tick Hard stop on any stop to get it.
Radial and conic gradients
A radial-gradient() takes an ending shape
(circle or ellipse), a size and a position:
background-image: radial-gradient(circle closest-side at 30% 40%, #ffd6a5, #bc4e9c);The four size keywords decide where the gradient finishes:
closest-side stops at the nearest edge of the box,
farthest-corner (the default) runs all the way to the furthest
corner, and closest-corner and farthest-side sit
in between. A conic-gradient() instead sweeps around its centre
and takes a from angle - it is what pie charts, colour wheels
and starburst backgrounds are made of.
Prefix any of the three with repeating- and the stop
sequence tiles outwards forever, which is the quickest way to build stripes,
rays and rings.
Why gradients go grey in the middle - and how to fix it
Blend blue into yellow and the middle turns a muddy grey. That is not a bug: browsers interpolate through sRGB by default, and the straight line between two opposite colours in that space passes near the centre, where everything is unsaturated.
Modern CSS lets you choose the space the blend travels through:
background-image: linear-gradient(90deg in oklch, #0000ff, #ffff00);OKLCH is perceptually even, so the middle stays as
bright and as saturated as the ends. For colours that carry a hue you can
also choose which way round the wheel it travels -
shorter hue (the default), longer hue,
increasing hue or decreasing hue. The comparison
strip in the Colour interpolation section shows the same
two colours blended both ways, side by side.
Because this is newer syntax, the tool writes a plain sRGB version of the
gradient first and wraps the modern one in an @supports rule.
Browsers that understand colour spaces use the real thing; everything else
gets a baked approximation that looks nearly identical. You can paste the
result straight into production.
Easing, layers, mesh and grain
Easing changes how quickly the colour moves along the line. CSS gradients have no way to express a curve, so choosing anything but linear writes the gradient out as computed stops - more code, but a blend that eases in or out the way an animation would.
Layers put several gradients in one
background-image, separated by commas, with the first one on
top. Give the upper layers transparent stops or a
background-blend-mode and they mix. That is all a
mesh gradient is: a handful of soft radial gradients over a
base colour, which is why the tool builds one for you from the same layer
system rather than pretending it is a different feature.
Grain lays a small SVG turbulence filter over the top. Besides looking expensive, it hides the banding that large, subtle gradients produce on eight-bit screens.
Output formats
The code panel offers the same four formats as the rest of our CSS tools: a plain CSS rule, custom properties so every colour can be re-themed from one place, an inline style for a single element, and a React style object. Colours can be written as HEX, RGB, HSL or OKLCH. You can also export the gradient as a PNG or an SVG - the SVG pastes into Figma as a real gradient fill - or copy a link that reopens exactly what you built.
Gradients, patterns or shapes?
Use this tool when colour flows from one place to another. When you want that same gradient machinery to draw stripes, dots or checks, our CSS Pattern Backgrounds has 52 ready patterns and CSS Pattern Builder lets you stack your own from parts. For silhouettes rather than colour, see the CSS Shape Generator, and for converting a colour between models there is the Color Converter. All of them are free and sit in our CSS tools section.
Frequently asked questions
Is this CSS gradient generator free?
Yes, completely free, with no account, watermark or usage limits. The CSS you generate is yours, for any purpose including commercial use.
Why does my gradient look grey in the middle?
Because browsers blend through sRGB by default, and the straight path between two strong, opposite colours passes through the desaturated centre of that space. Open Colour interpolation and pick OKLCH: it is perceptually even, so the midpoint keeps its brightness and saturation. The comparison strip shows both versions at once.
How do I make a gradient go diagonally?
Set the angle to 45, 135, 225 or 315 degrees - or drag the dial to any
angle in between. CSS angles start at the top and run clockwise, so
135deg travels towards the bottom right corner. When the
angle lands on one of the eight cardinal directions the tool writes the
keyword form instead, such as to bottom right.
Do CSS gradients work in every browser?
Linear, radial and conic gradients work in every current browser, as
do multiple layers, blend modes and hard stops. Interpolating in a colour
space such as OKLCH is newer, which is why the tool writes an
@supports fallback: older browsers get a plain sRGB version
of the same gradient, built from computed stops.
What is a mesh gradient?
Several soft, partly transparent radial gradients layered over a base colour, so the colours pool and blend into each other instead of running along one line. Open Layers and mesh and press Make a mesh - each blob is an ordinary layer you can move, recolour or delete.
Can I edit a gradient I already have?
Yes. Open Import and export, paste the
linear-gradient(...), radial-gradient(...) or
conic-gradient(...) you already wrote, and press
Load it. Colours, positions, hard stops and midpoint
hints all come across, and you can carry on editing from there.
How do I add more than two colours?
Click anywhere on the gradient bar and a new stop appears in the colour that was already there, so nothing jumps. Drag it where you want it, then change its colour. Double-click a stop to remove it; a gradient always keeps at least two.
Can I use a gradient as a background image and a colour?
Yes, and you often should. The tool writes
background-image for the gradient and can add a
background-color underneath it, which shows through wherever
your stops are transparent and acts as a fallback for anything that fails
to paint the gradient at all.
Is anything uploaded to a server?
No. The gradient is generated and previewed entirely in your browser; nothing is stored when you close the page.