Skip to content

CSS Gradient Generator

Create multi-stop linear and radial gradients and copy the CSS code.

Private Instant No sign-up No daily limit

Free to use. No account, no daily limit, and no watermark on the result.

 Gradient Builder

Linear
Gradient type

0° points up, 90° points right. Negative values rotate counter-clockwise.

Radial shape
Gradient position

Used by the at keyword for radial and conic gradients.

Colour stops 2 stops

Gradient preview drag the round handles to move each stop
2–6 colour stops · drag to reposition

 Preview & CSS Output

2 stops

Live preview — the CSS updates instantly as you change any control.

Generated CSS

linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%)

Ready-made snippets

background-image
background-image: linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%);
background shorthand
background: linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%);
background-image with fallback colour
background-color: #8b5cf6; background-image: linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%);
Browser support. Linear gradients work everywhere. Radial gradients are supported by every modern browser, while conic gradients need a 2021 or newer build of Chrome, Edge, Safari or Firefox.

How to create a CSS gradient

1

Choose the gradient type

Pick linear for a straight sweep, radial for a spotlight or conic for a sweep around a centre point.

2

Set angle, shape and position

Use the angle slider for linear and conic gradients, then switch the radial shape between circle and ellipse and set the size and centre point.

3

Add and drag the colour stops

Add between two and six stops, pick each colour and drag the round handles on the gradient bar to place them exactly where you want.

4

Copy the CSS or export a PNG

Copy the plain gradient function, the background-image snippet, the background shorthand or the version with a fallback colour — or download a PNG of the gradient.

CSS gradient generator — frequently asked questions

The syntax is linear-gradient(angle, colour-stop, colour-stop). The angle comes first, then every colour stop as a colour followed by its position in percent. For example linear-gradient(90deg, #8b5cf6 0%, #22d3ee 100%) fades purple on the left into cyan on the right. Radial gradients swap the angle for a shape and size, and conic gradients use from 0deg plus an at position.

CSS technically allows any number of stops, but this builder keeps it to a manageable two to six. Each stop can sit at its own percentage, so you can build a smooth multi-colour blend or a hard two-tone edge by placing two stops at the same position.

A radial gradient radiates from a centre point outwards, like a spotlight, and is controlled by a shape (circle or ellipse), a size and a position. A conic gradient sweeps the colours around the centre point like a colour wheel, which makes it perfect for rainbow rings, spinner loaders and polar charts.

Yes. The “Copy as PNG” button renders the gradient to an HTML canvas at 1200 × 800 pixels and downloads it as a transparent-free PNG file. The image is generated locally in your browser, so nothing is uploaded and the download starts immediately.

Related Color & Design

Color Converter & Picker

Convert between HEX, RGB, HSL and CMYK with WCAG contrast ratio checks.

Open tool

CSS Gradient Generator

Create multi-stop linear and radial gradients and copy the CSS code.

Open tool

Image Palette Extractor

Extract the dominant colour palette and hex codes from any image.

Open tool