CSS Gradient Generator

Build stunning gradients with live preview — linear, radial & conic

Gradient Type

Angle

135°

Color Stops

Color

Position: 0%

Opacity: 100%

Presets

Preview

Color Strip

CSS Code

background:

linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

Usage Examples

CSS

background: linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%);

Tailwind arbitrary

className="[background:linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%)]"

React inline

style={{ background: 'linear-gradient(135deg, #8b5cf6 0%, #06b6d4 100%)' }}

About the CSS Gradient Generator

This CSS gradient generator builds linear, radial and conic gradients with as many colour stops as you need, previewing the result live and outputting standard CSS. Angle, position and stop placement are all adjustable by dragging.

A CSS gradient generator saves you from guessing at gradient syntax. The property takes a type, an angle or position, and a list of colour stops with percentages — readable once written, but almost impossible to picture from the numbers alone.

All three gradient types are here. Linear runs colour along an angle and covers most backgrounds and buttons. Radial spreads outward from a point, useful for spotlights and soft vignettes. Conic sweeps colour around a centre, which is how pie charts and colour wheels are drawn in pure CSS.

Add as many stops as the design needs and drag them to reposition. The output is a standard background-image value with no vendor prefixes required for current browsers, so it can go straight into a stylesheet.

How to use the CSS Gradient Generator

  1. Choose the gradient type. Pick linear, radial or conic.
  2. Set your colour stops. Add stops, pick colours and drag them to position.
  3. Adjust angle or centre. Set the direction for linear, or the origin for radial and conic.
  4. Copy the CSS. Take the generated background-image value into your stylesheet.

CSS Gradient Generator features

  • Linear, radial and conic gradients
  • As many colour stops as you need, with adjustable positions
  • Angle and position control
  • Presets from sunset and ocean to aurora and midnight
  • Live preview against the generated CSS
  • Copy the finished CSS or download it

Frequently asked questions

What is the difference between linear, radial and conic?

Linear runs along a straight line at an angle you choose. Radial spreads outward from a point, which suits spotlights and soft backgrounds. Conic sweeps around a centre, which is how you build a pie chart or a colour wheel in pure CSS.

How do colour stops work?

Each stop is a colour plus a position along the gradient. Placing two stops close together makes a sharp transition; spreading them out makes a gradual one. Two stops at the same position produce a hard edge with no blend at all.

Why does my gradient have a grey band in the middle?

Because interpolating between two saturated complementary colours passes through a desaturated midpoint. Add an intermediate stop in a hue that sits between them and the band disappears.

Does it make repeating gradients?

No, this produces single linear, radial and conic gradients. Repeating variants exist in CSS as repeating-linear-gradient and its siblings, but they are not generated here.

Are gradients good for page backgrounds?

Yes, and they are cheaper than an image — no extra request, no file to optimise, and they scale to any viewport without blurring. Keep the contrast low enough that text on top stays readable at both ends.