CSS gradient generator

Create layered linear, radial, and conic gradients with draggable color stops, blend modes, and export-ready CSS.

Presets

Pick a polished starting point.

Layers

Stack multiple gradients for depth.

Layer settings

Tune the geometry and blending.

Angle135°
Interpolation
Blend mode

Color stops

Click to add a stop. Drag handles to move.

Stop color
%
Stop color
%
Stop color
%

CSS output

Copy CSS that matches the preview.

Configuration JSONExport or paste a gradient setup.

What is a CSS gradient?

A CSS gradient is an image generated by the browser from a smooth transition between colors. Because it is computed at render time, it scales to any size without pixelation and does not require image files.

Gradients come in three types: linear (direction or angle), radial (circle or ellipse from a center), and conic (a sweep around a center). Each gradient is defined by color stops; every stop can include a position and alpha to control how the colors blend.

Multiple gradients can be layered by separating them with commas in background-image, and you can combine them with background-blend-mode for richer textures. CSS also supports different interpolation color spaces, such as oklch, for smoother perceptual transitions.

  • Linear gradients are great for lighting and directional depth.
  • Radial and conic gradients are useful for spotlights, rings, and color wheels.
  • Adjust stop positions to sharpen or soften transitions.

How to use

Choose a preset or edit gradient layers, geometry, blend modes, and color stops. The preview and CSS update automatically; copy the CSS or export the configuration and image formats when ready.