CSS Gradient Generator — Linear & Radial, Unlimited Stops

Design smooth gradients with unlimited stops. Private by design—everything runs locally in your browser.

Preview

/* CSS will appear here */

Type, Angle/Shape & Stops

Tips: Evenly space stops (0%, 50%, 100%) for smooth blends. Try analogous colors for subtle UIs or complementary for punch. Press Ctrl/Cmd + C to copy CSS.

How it works

This generator runs entirely in your browser using the Canvas/CSS stack—no uploads, no tracking. Choose a gradient type (linear or radial), adjust angle or shape, then add as many color stops as you like. The preview updates in real-time and the exact CSS is produced below for easy copy-paste.

Tips for clean gradients

  • Spread stops evenly (e.g., 0%, 50%, 100%) for smooth transitions.
  • Try analogous colors for subtle UIs or complementary colors for visual punch.
  • Use radial gradients for hero backgrounds and circular elements.
  • Gradients are GPU-friendly; prefer CSS gradients over large bitmap backgrounds for faster paints and smaller payloads.

5 Fun Facts about CSS Gradients

GPU-friendly paint

CSS gradients are vector math—no image fetch, tiny payload, and they offload to the GPU for smooth paints and animations.

Free performance

Angles are from the top

In CSS, 0° points “up” and increases clockwise, so 90° is left→right. That’s flipped from classic math graphs.

CSS compass

Color space matters

LCH/Lab interpolation makes pastels stay pastel between stops. sRGB can gray-out on long blends—try color-mix() to compare.

Smoother blends

Repeating = stripes

repeating-linear-gradient and friends loop your stops endlessly—perfect for barcodes, lined paper, or hatched backgrounds.

Endless patterns

Stack for depth

Multiple gradients on one element layer like Photoshop. Add noise, light falloff, and a vignette—all in a single background-image.

Layer magic

Explore more tools