CSS Gradient Generator

This free CSS gradient generator builds linear and radial gradients in your browser. Pick the colours, move the stops, check the live preview and copy ready-to-use CSS for buttons, banners and page backgrounds.

How to use the CSS gradient generator

1. Choose Linear or Radial.
2. For a linear gradient, drag the angle slider to set the direction.
3. Set each colour stop: pick its colour and its position along the gradient. You can have between 2 and 5 stops; use add and remove to change how many.
4. Watch the live preview, then press copy to take the CSS.

Linear gradients and angles

linear-gradient() blends colours along a straight line. The angle sets the direction of that line. 0deg points up and the angle turns clockwise. If you leave the angle out, the default is to bottom, which is the same as 180deg. The full syntax is described on MDN’s linear-gradient() reference.

.hero {
  /* a sunrise over the Bay of Bengal */
  background-image: linear-gradient(135deg, #ff9933 0%, #ffd27f 50%, #4fa3d1 100%);
}

Colour stops and positions

Each stop is a colour plus an optional position, such as #ffd27f 50%. The browser blends smoothly from one stop to the next. Without positions, the stops are spaced evenly. If two stops share the same position, there is no blend between them and you get a hard edge, which is how CSS stripes are made.

.flag-stripes {
  /* hard edges: each colour starts where the last one ends */
  background-image: linear-gradient(
    to bottom,
    #ff9933 0% 33.33%,
    #ffffff 33.33% 66.66%,
    #138808 66.66% 100%
  );
}

Radial gradients

radial-gradient() spreads colour outwards from a centre point. By default the shape is an ellipse that fits the element, centred, and sized to reach the farthest corner. Add the keyword circle for a round shape, and at to move the centre. Positions work the same way: 0% is the centre and 100% is the edge of the shape.

.spotlight {
  background-image: radial-gradient(circle at 30% 40%, #ffffff 0%, #9fc5e8 40%, #0b5394 100%);
}

A gradient is an image, not a colour

In CSS, a gradient counts as an <image>. That means it works with background-image or the background shorthand, but not with background-color. A common beginner mistake is background-color: linear-gradient(…), which the browser ignores as invalid. Gradients have no fixed size of their own; they stretch to fill the element’s background area.

Tips for gradients that look good

• Start with neighbours. Two colours that sit close together on the colour wheel, such as orange and gold, blend cleanly. Colours from opposite sides can pass through a dull grey or brown in the middle; add a third stop between them to avoid that.
• Keep it subtle behind text. A gentle shift in lightness reads as depth, while strong contrasts compete with the content.
• Reuse your palette. Build gradients from your brand or design-system colours so they feel part of the same product.

Learn more

• CSS Colors and Backgrounds
• Colour in UI Design
• Colour Theory for UI Designers: Practical Rules for Screens
• Dark Mode Design and CSS: From Colour Choices to a Working Toggle
• CSS Box Shadow Generator
• Colour Converter (HEX, RGB, HSL)

Frequently asked questions