Skip to content

CSS Gradient Generator

Create linear, radial and conic CSS gradients with multiple color stops, angle and shape controls and presets, then copy the CSS.

CSS Gradient Generator

Gradient type

Linear settings

135°
0° = bottom to top, 90° = left to right

Color stops (2)

#667eea
0%
#764ba2
100%

Edit color stop

0%

Presets

Live preview
CSS output
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Gradient value
linear-gradient(135deg, #667eea 0%, #764ba2 100%)

Updated . Provided as is. Check the output before you rely on it in production.

How to use CSS Gradient Generator

  1. 1

    Choose a gradient type

    Pick linear, radial or conic. Radial gradients suit spotlight effects; conic gradients sweep around a center point.

  2. 2

    Pick colors and stops

    Add color stops and set each stop's color and position. The live preview updates as you change them.

  3. 3

    Fine-tune angle and position

    Set the angle for linear and conic gradients, or the shape and center position for radial ones. You can also start from a preset.

  4. 4

    Copy the CSS

    Copy the full background declaration or the gradient value. Current browsers support all three gradient types without vendor prefixes.

Questions and answers

What is CSS Gradient Generator?
A CSS gradient is an image the browser draws by blending colors along a line, out from a point, or around a center. This generator builds linear, radial and conic gradients with any number of positioned color stops, angle or shape controls and presets, and outputs the background CSS.
What types of CSS gradients can I create?
You can create linear gradients (directional color transitions), radial gradients (circular or elliptical), and conic gradients (color sweeps around a center point). Each supports multiple color stops with precise positioning.
For AI agents: how to call this tool

Machine-readable contract, endpoints and examples. Humans can ignore this section.

Best Path For Builders

Browser workflow

Runs instantly in the browser with private local processing and copy/export-ready output.

Browser Workflow

This tool is optimized for instant in-browser execution with local data handling. Run it here and copy/export the output directly.

/css-gradient-generator/

For automation planning, fetch the canonical contract at /api/tool/css-gradient-generator.json.