← All tools
// CSS / Design

Gradient Generator online

Generate CSS linear and radial gradients — copy ready-to-use CSS

CSS Gradient Generator logo
by
CHUNKY
MUNSTER
// CSS output

How to Use gradient-generator

  1. Choose Linear, Radial, or Conic gradient type.
  2. Pick two or more colour stops using the colour pickers and position sliders.
  3. Adjust the angle (linear) or focal point (radial/conic) for the direction.
  4. Click Copy CSS to get the ready-to-paste gradient declaration with all vendor prefixes.

CSS gradients create smooth colour transitions that scale perfectly at any resolution, replace simple background images without an HTTP request, and animate smoothly. This generator covers linear, radial, and conic gradient types with multi-stop support, live preview, and clean CSS output including the -webkit- prefix for maximum browser compatibility.

Linear, Radial, and Conic Gradients

Linear: transitions along a straight line at any angle. Radial: radiates from a centre point outward in a circle or ellipse. Conic: rotates colour stops around a centre point — the same as a colour wheel or pie chart. All three accept as many colour stops as you need, at any position. Combining gradient types via multiple backgrounds creates complex visual effects.

Frequently Asked Questions

What is a conic gradient?

A conic gradient sweeps colour stops around a central point — like hands on a clock face. conic-gradient(red, blue, red) creates a colour wheel. It's useful for pie charts, loading spinners, and angle-based visualisations.

How do I create a stripe pattern with CSS gradients?

Use hard stops: repeating-linear-gradient(45deg, #000 0, #000 25%, transparent 0, transparent 50%). Hard stops (two colours at the same position) create sharp edges instead of blends.

Can I stack multiple gradients in CSS?

Yes — CSS allows multiple backgrounds separated by commas: background: linear-gradient(...), radial-gradient(...). Layers stack from top (first listed) to bottom.

Why doesn't my gradient look the same in all browsers?

Modern browsers all support standard CSS gradient syntax. Differences may arise from colour space — CSS Color Level 4 introduces in oklch and similar modifiers for perceptually uniform interpolation. Without these, gradients use sRGB interpolation, which all browsers handle identically.

See also the CSS Gradient Generator, Box Shadow Generator, and Color Palette Generator.