AI Tool Hub

CSS Gradient Generator

Build linear and radial CSS gradients visually.

Guide & how to use

What this tool does

Pick gradient type, set angle or shape, add color stops with positions, and see a live preview. Copy the CSS to your stylesheet.

Example input/output

Illustrative sample — your real inputs may look different.

Example input

Linear · 135° · #667eea → #764ba2

Example output

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

How to use

  1. Choose linear or radial gradient type.
  2. Add or adjust color stops and their positions.
  3. Copy the generated CSS rule into your stylesheet.

Frequently asked questions

Related tools