CSS Gradient Generator - Live Preview

What is the CSS Gradient Maker?

The Gradient Maker builds CSS gradients visually and gives you the code to paste into a stylesheet. You add colour stops, set the angle or shape, and see the result update as you work.

CSS gradients are generated by the browser rather than loaded as images, which means they cost no network request, scale to any size without loss, and can be animated or adjusted with custom properties.

A linear gradient interpolates colour along an axis defined by an angle. A radial gradient radiates outward from a point. A conic gradient sweeps around a centre, which is what makes pie charts and colour wheels possible in pure CSS.

Colour stops control where each colour sits along that progression. The interpolation between stops happens in sRGB by default, which is why some pairs of colours pass through a muddy grey in the middle, an artefact of the colour space rather than a mistake in your CSS.

How to use the CSS Gradient Maker

Choose a gradient type. Linear for a directional fade, radial for one radiating from a point, conic for a sweep around a centre.
Add and position colour stops. Two stops give a simple fade; additional stops let you control the progression precisely.
Set the angle or position. For linear gradients, 0deg runs bottom to top and 90deg runs left to right.
Copy the generated CSS. Paste the background property straight into your stylesheet.

Worked examples

A basic linear gradient

The angle sets the direction, and each stop names a colour and its position along the axis.

Input

Type:  linear
Angle: 135deg
Stops: #667EEA at 0%, #764BA2 at 100%

Output

background: linear-gradient(
  135deg,
  #667EEA 0%,
  #764BA2 100%
);

Hard stops for a striped effect

Placing two stops at the same position produces a sharp edge instead of a blend, the basis for stripes and colour blocks.

Input

Stops: #F59E0B at 0%,  #F59E0B at 50%,
       #10B981 at 50%, #10B981 at 100%

Output

background: linear-gradient(
  90deg,
  #F59E0B 0%,
  #F59E0B 50%,
  #10B981 50%,
  #10B981 100%
);

Two colours meeting at 50% with no blend.

Common use cases

Hero and section backgrounds. A gradient adds depth to a large area without the weight of a background image.
Button and card styling. Subtle gradients give interactive elements dimension.
Text effects. Combined with background-clip: text, a gradient can fill the glyphs themselves.
Image overlays. A gradient from transparent to dark over a photograph keeps overlaid text readable.

Features and limitations

Supports linear, radial, and conic gradients.
Add, remove, and reposition an arbitrary number of colour stops.
Live preview alongside the generated CSS.
Output is standard CSS with no vendor prefixes needed for current browsers.
Interpolation is in sRGB, matching default browser behaviour. Newer colour-space interpolation syntax is not generated.

Frequently asked questions

Are CSS gradients better than background images?

For flat colour transitions, yes. They add no HTTP request, scale losslessly, and can be modified with custom properties or animated. Images remain necessary for photographic or highly detailed backgrounds.

How do angles work in a linear gradient?

0deg points upward and angles increase clockwise, so 90deg runs left to right and 180deg runs top to bottom. Keywords such as 'to right' are equivalent and often more readable.

Why does my gradient look muddy in the middle?

Because interpolation happens in sRGB, where blending certain complementary colours passes through a desaturated grey. Adding an intermediate stop in a colour you like avoids the dead zone.

Can I animate a gradient?

Gradients are not directly interpolatable, so transitioning background-image does not animate smoothly. The usual approaches are animating background-position on an oversized gradient, or cross-fading two layered elements.

How do I apply a gradient to text?

Set the gradient as the background, then apply background-clip: text with a transparent text colour. Include a solid fallback colour for environments where that is unsupported.

Do I need vendor prefixes?

Not for any currently supported browser. Prefixed gradient syntax is only relevant for very old browser versions.

All processing happens locally in your browser, your data never leaves your device.

Gradient Color Maker