CSS Gradient Generator Online Free — Copy CSS

CSS Gradient Generator — linear & radial, live preview runs in your browser · nothing uploaded

ANGLE

SHAPE

COLOR STOPS

CSS

Generated client-side · nothing uploaded

CSS Gradient Generator Online

Updated 2026-07-09

Create CSS gradients online for free. Pick linear or radial, add colour stops, drag their positions, and set the angle — all with a live preview — then copy the ready-to-use background declaration. Everything runs in your browser, so nothing you design is uploaded.

Hand-writing gradient CSS means guessing at angles and stop positions and reloading to see the result. This generator shows the blend as you build it and emits clean, standard linear-gradient() or radial-gradient() syntax that works in every modern browser without a vendor prefix — drop it onto a page background, a hero, a button, or a card.

// how to use

1 Choose a gradient type — linear or radial — in the options bar.
2 Add color stops, pick each colour, and drag its position; set the angle for linear gradients.
3 Watch the live preview update, then click Copy CSS to grab the background declaration.

// examples

Two-colour linear gradient

Input

linear, 90°, #7c6aff → #0891b2

Output

background: linear-gradient(90deg, #7c6aff 0%, #0891b2 100%);

Radial gradient

Input

radial circle, #f97316 → #111827

Output

background: radial-gradient(circle, #f97316 0%, #111827 100%);

// common uses

Designing hero and section backgrounds Creating gradient buttons and cards Prototyping colour blends before coding them Learning linear and radial gradient syntax

// faq

No. The gradient is built entirely in your browser and the CSS is generated live, so nothing you design leaves your machine.

A linear gradient blends colours along a straight line at the angle you set, while a radial gradient blends outward from a centre point in a circle or ellipse. This tool generates both with the correct CSS syntax.

You can add up to eight colour stops, each with its own colour and position, which is enough for smooth multi-colour blends without unwieldy output.

Yes. It outputs the standard, unprefixed linear-gradient() and radial-gradient() syntax, which every modern browser supports without a vendor prefix.

Absolutely. Paste the generated background declaration onto any element — a page background, a hero section, a button, or a card — since a CSS gradient is treated as a background image.

// related

Color Palette Generator Box Shadow Generator Color Converter Cubic Bezier Generator CSS Formatter