CSS Gradient Generator

Build linear or radial CSS gradients with live preview and copyable code.

Your files never leave your device. Everything runs in your browser.

What CSS Gradient Generator does

CSS Gradient Generator builds a linear or radial gradient and hands you the exact CSS to paste elsewhere. Choose the type, set the angle for linear gradients, pick two colours, and the preview swatch and the code line update instantly. Five preset buttons cover common combinations.

Verified outputs from this page: the default state generates background: linear-gradient(135deg, #6366f1, #ec4899);. Switching to Radial while the angle stays at 90 gives background: radial-gradient(circle, #ff0000, #0000ff); — radial mode ignores the angle and always draws a centred circle. Setting the angle to 90 and the colours to red and blue gives background: linear-gradient(90deg, #ff0000, #0000ff);.

The generated value is an ordinary CSS background, so it works in a stylesheet rule, an inline style attribute or a design tool that accepts CSS. There is no image to export and no JavaScript needed at runtime: the browser paints the gradient itself.

How to use CSS Gradient Generator

Choose Linear or Radial under Type.
For linear gradients, set the Angle in degrees; an empty field counts as 0.
Pick the Start color and End color with the two colour inputs.
Press any preset button to load a ready-made colour pair, then tweak it.
Watch the preview rectangle, then press Copy CSS to copy the finished line.

Features

Linear and radial gradient types in one card.
Angle control from 0 to 360 degrees, used by linear gradients.
Two colour pickers with sensible defaults and five one-click preset pairs.
Live preview that renders with the same value shown in the code box.
Exact single-line output: background: linear-gradient or radial-gradient, ready to paste.
Copy CSS button and fully local operation — no colour or code leaves the page.

Tips and common mistakes

Angles follow CSS convention: 0 points up, 90 points right and angles increase clockwise, so the default 135 runs diagonally towards the bottom right.
Radial mode ignores the angle field and generates radial-gradient(circle, start, end), a circle centred in the element that stretches the colours outward as it grows.
The output targets the background shorthand. If you set background-image separately, use the same value there and keep background-color as a fallback for very old browsers.
Only two colour stops are generated. For three or more, copy the line and add extra stops inside the parentheses by hand.
The angle field suggests 0 to 360, but empty input becomes 0deg rather than an error, and CSS wraps angles outside the range rather than rejecting them.
Colours come from the picker as six-digit hex, so every generated gradient is fully opaque; add alpha by hand if the design needs see-through stops.
A radial gradient makes a good glow behind a card when the end colour matches the page background.

Frequently asked questions

Is the generated CSS ready to use?

Yes. Paste background: linear-gradient(...) or radial-gradient(...) into a stylesheet rule or a style attribute; it is a standard CSS value supported by current browsers with no prefixes.

Why does the angle not affect radial gradients?

A radial gradient grows from a centre point outwards, so it has no direction to rotate. The tool always emits a circle and leaves the angle field to linear mode.

Can I generate more than two colours?

The generator writes two stops for clarity. Copy its output and add more comma-separated stops in the same format — for example three colours with percentage positions — to build richer gradients.

What order do the parts of a linear gradient go in?

The direction comes first, as an angle or a side keyword, then the colour stops in painting order, separated by commas: the first colour sits at the start of the line and the last at the end.

Does the preview match the copied code?

Yes. The preview rectangle and the code box are updated from the same value on every change, so what you see is exactly what gets copied.

Is anything uploaded?

No. The gradient is composed in your browser and the page stores nothing.

Related text tools: Box Shadow Generator, Color Converter, Color Palette Extractor.

Gradients are built locally in your browser — no colours or code ever leave the page.