ToolVaults

CSS Gradient Generator — Linear, Radial, Conic

Design linear, radial, and conic CSS gradients with unlimited color stops. Live preview and copy the CSS. Share via URL.

Runs 100% in your browser — nothing is uploaded.
Color stops
  • 0%
  • 100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);

How to use

  1. 1
    Pick a gradient type

    Linear (line), radial (ellipse), or conic (sweep around a point).

  2. 2
    Set color stops

    Start with two colors, click "Add stop" for more. Drag position sliders to control where each color lives.

  3. 3
    Adjust angle or shape

    Linear + conic take an angle in degrees. Radial takes a shape (circle/ellipse) and a center position.

  4. 4
    Copy the CSS

    One-line background-image rule ready to paste. Every change is in the URL so you can share the exact gradient.

Examples

Brand gradient (linear, 2 stops)
Input
Type: linear · Angle: 135deg · Stops: #6366f1 (0%), #8b5cf6 (100%)
Output
background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%);
The hero-section pattern every SaaS ships with.
Radial spotlight
Input
Type: radial · Shape: circle · Center: 50% 0% · Stops: rgba(99,102,241,0.4) → transparent
Output
background: radial-gradient(circle at 50% 0%, rgba(99,102,241,0.4), transparent 70%);
Great for adding depth behind a hero headline.
Rainbow conic
Input
Type: conic · Stops: red → yellow → green → blue → red
Output
background: conic-gradient(from 0deg, red, yellow, green, blue, red);
Progress ring, color-picker background, or just fun. Wrap the last stop back to red for a seamless loop.

Frequently asked

What is a conic gradient?

A gradient that sweeps around a center point like a color wheel or pie chart. Great for progress rings and hero backgrounds. Modern browsers only.

Can I add more than 2 stops?

Yes — click "Add stop" and drag the position sliders. Stops are automatically sorted by position when rendered.

Does it support angles for radial?

Radial gradients don't use angles — they use shape (circle/ellipse) and position. Angles apply to linear and conic gradients.

Related tools