CSSAwwwards
+ Submit tool
Built-in toolFree · No signup

CSS Gradient Generator

Create linear, radial, and conic CSS gradients visually. Add unlimited colour stops, adjust opacity, drag to position, and copy production-ready CSS in one click.

Type

Angle — 135°

Color stops — click bar to add · drag to move · double-click handle to remove

Selected stop

All stops (2)

Presets

CSS Output
background: linear-gradient(135deg, #1D9E75 0%, #141E30 100%);background: -webkit-linear-gradient(135deg, #1D9E75 0%, #141E30 100%);

How to use

01

Choose a type

Pick Linear, Radial, or Conic gradient. Linear supports angle control; Radial supports shape and position.

02

Add colour stops

Click anywhere on the gradient bar to add a stop. Drag handles to move them. Double-click a handle to remove it.

03

Adjust each stop

Select a stop to edit its hex colour, opacity, and position precisely with sliders or number inputs.

04

Copy and use

Hit Copy CSS to get the full background declaration, including the -webkit- prefix for maximum compatibility.

More CSS generator tools

Hand-picked from our directory of 30+ CSS tools.

View all generators →

Know a better gradient tool?

Submit it to the directory and help other developers discover it.

Submit a tool →