BROWSER TOOL

Gradient designer Free

Design linear, radial and conic CSS gradients with draggable colour stops and a live preview, then copy the CSS or export a PNG at any size.

Processed on your device · your files are never uploaded

Click the bar to add a stop. Drag a stop, or focus it and use the arrow keys (Shift for 10%). Delete removes it.

CSS

.gradient {
  background-color: #ff8084;
  background-image: linear-gradient(135deg, #ff8084 0%, #ffb86b 55%, #ffe29a 100%);
}

Presets

Gradient

Angle135°

Selected stop (1 of 3)

Colour

Opacity100%

Position0%

Export PNG

Size

About Gradient designer

Gradient designer lets you shape a gradient visually instead of guessing at numbers. Drag colour stops along the bar, add or remove stops, change each stop’s colour and opacity, and set the angle or centre point while the preview updates instantly.

When it looks right, copy the ready-to-paste CSS background declaration or export the gradient as a PNG image for slides, wallpapers or social graphics, at a size you choose.

How to use it

Choose linear, radial or conic, or start from one of the presets.
Drag the stops on the bar to move them; click the bar to add a stop, and select a stop to change its colour or opacity or delete it.
Adjust the angle, shape or centre position for the selected gradient type.
Copy the CSS, or set a width and height and download a PNG.

Good to know

Colours blend in the sRGB space that browsers use by default, so the PNG export matches what you see in the preview.
PNG export is limited to 8,192 pixels per side and 16 megapixels in total to keep memory use reasonable.
Conic gradients need a browser released in 2021 or later to display the copied CSS.

Questions and answers

Can I use the CSS in any website?

Yes. The output is a standard background-image declaration using linear-gradient(), radial-gradient() or conic-gradient(), supported by all current browsers.

How do I remove a colour stop?

Select the stop and press Delete stop, or focus it and press the Delete key. A gradient always keeps at least two stops.

Can I move stops with the keyboard?

Yes. Focus a stop on the bar and use the arrow keys to move it by 1%, or hold Shift to move it by 10%.