What is the difference between a linear and radial gradient?

A linear gradient blends colours along a straight line whose direction you set with the angle slider. A radial gradient blends outward from a central point in a circle, so the first colour sits in the middle and fades to the second at the edges.

How do I control where each colour starts?

Each colour stop has a position slider from 0 to 100 percent. Moving the stops closer together makes a sharper transition, while spreading them apart creates a smoother, more gradual blend.

Is my gradient uploaded anywhere?

No. The generator runs entirely in your browser using plain JavaScript and CSS. Nothing you create is sent to a server or stored anywhere.

CSS Gradient Generator — Live Preview & Copy

CSS Gradient Generator

Design a linear or radial CSS gradient with colour pickers, position sliders and an angle control — watch the live preview update as you tweak it, then copy the ready-to-paste CSS, all in your browser.

Linear Radial

Angle: 90deg

Colour stop 1: 0%

Colour stop 2: 100%

🔒 100% private — runs in your browser, never uploaded.

How to use the gradient generator

Choose Linear for a straight blend or Radial for a circular blend that spreads from the centre.
For a linear gradient, drag the angle slider to set the direction the colours flow (0deg points up, 90deg points right).
Pick your two colours with the colour swatches, then drag each position slider to decide where that colour sits.
Watch the preview box update instantly as you adjust everything.
Click Copy to put the full background rule on your clipboard, ready to paste into your stylesheet.

Understanding CSS gradients

A CSS gradient is an image generated by the browser, so you apply it through the background property rather than loading a file. A linear gradient follows the syntaxlinear-gradient(90deg, #6a11cb 0%, #2575fc 100%), where the first value is the angle and each colour is paired with a position. A radial gradient uses radial-gradient(circle, …) and blends outward from the middle instead of along a line. Because gradients are vector-based, they stay crisp at any screen size and add zero extra network requests — there is no image to download. This tool writes the values in the correct order and updates the preview live so you can dial in exactly the look you want.

Subtle two-colour gradients are a popular way to add depth to buttons, hero sections and cards. Keep the two colours fairly close in hue for a gentle, professional fade, or pick contrasting colours for a bold, eye-catching effect. The position sliders let you push the blend off-centre — for example, holding both stops near the same value produces an almost hard split, which is handy for two-tone banners.

Is it private?

Yes — everything happens on your device. The colour pickers, sliders, live preview and generated CSS are all produced by a small piece of vanilla JavaScript that runs in your browser. There is no upload, no account and no tracking of what you build. Once the page has loaded you can even keep using it offline.

Frequently asked questions

Can I add a third colour stop?

This tool focuses on a clean two-colour gradient. CSS itself supports any number of stops — just add more comma-separated colour position% pairs inside the gradient function in your stylesheet.

Which browsers support CSS gradients?

All modern browsers support linear-gradient and radial-gradient without a vendor prefix, so the copied CSS works everywhere your visitors are likely to be.

Does it work offline?

Yes — once the page has loaded it keeps working without a connection.