CSS Gradient Generator Online Free — Copy CSS

chain

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

ANGLE

SHAPE

COLOR STOPS

↑↓ nudge focused slider by 1 (⇧ ±10)

approximation — SVG angle convention differs from CSS; rotate transform gets it close, not pixel-exact

Generated client-side · nothing uploaded

CSS Gradient Generator Online

Updated 2026-08-19

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

Is anything uploaded to a server?

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

What is the difference between a linear and radial gradient?

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.

How many colour stops can I add?

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.

Does the CSS work in all browsers?

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

Can I use this for a background image or button?

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.

// works with your data

CSS Formatter CSS Minifier Sort & Dedupe Lines Slug Generator Reverse Text Text Repeater