← All tools
// CSS

CSS Gradient Generator online

Generate beautiful CSS linear and radial gradients with live preview

CSS Gradient Generator logo
by
CHUNKY
MUNSTER
// Settings
0%
100%
// CSS

How to Use css-gradient

  1. Choose Linear or Radial gradient type.
  2. Add colour stops: pick each colour and set its position as a percentage.
  3. Adjust the gradient angle (linear) or shape and position (radial).
  4. Click Copy CSS to get the ready-to-paste gradient declaration.

CSS gradients create smooth transitions between two or more colours without images. They are resolution-independent (scale perfectly at any size), applied as background images, and supported natively in all modern browsers. This generator handles linear and radial gradients with multiple colour stops, live preview, and clean CSS output.

Linear vs Radial Gradients

Linear gradients progress along a straight line at any angle. The to right direction is equivalent to 90deg. Radial gradients radiate outward from a centre point in either a circular or elliptical shape. Both types accept as many colour stops as you need, positioned anywhere from 0% to 100%. Hard stops (two colours at the same position) create sharp dividing lines rather than blends.

Frequently Asked Questions

What is a hard gradient stop?

When two colour stops share the same position (e.g. both at 50%), the gradient transitions sharply rather than smoothly. This creates a solid colour dividing line — used in striped backgrounds and geometric patterns.

Can I use gradients as text colour in CSS?

Yes: set background: linear-gradient(...), then -webkit-background-clip: text and -webkit-text-fill-color: transparent. This clips the gradient to the text shape. Use with care — browser support for the standard property is uneven.

What is a conic gradient?

A conic gradient rotates colour stops around a centre point — like a pie chart or colour wheel. CSS supports conic-gradient() in all modern browsers. This generator focuses on linear and radial; a separate Gradient Generator tool covers conic.

How do I create a diagonal gradient?

Use linear-gradient(45deg, ...) for a bottom-left to top-right diagonal. 135deg goes top-left to bottom-right. The angle is measured clockwise from the top of the element.

See also the CSS Gradient Generator, Box Shadow Generator, and Border Radius Generator.