CSS Gradient Generator

What is a CSS gradient?

A CSS gradient is an image that the browser draws from a list of colors, so it scales to any size and needs no file to download. CSS has three kinds:

• linear-gradient() blends colors along a straight line, at the angle you choose.
• radial-gradient() spreads colors out from a center point, as a circle or an ellipse.
• conic-gradient() sweeps colors around a center point, like the hand of a clock.

A gradient counts as an image, not a color, so it goes in background or background-image. In background-color it does nothing.

How to use the gradient generator

1. Choose Linear, Radial or Conic from the type menu.
2. For a linear or conic gradient, set the angle with the slider or type it in degrees.
3. Change each color stop's color and position. Use the + button to add a stop, and remove the ones you don't need.
4. Or open the presets and start from a ready-made gradient.
5. Copy the CSS from the code panel. The preview shows the gradient as you go.

linear-gradient() syntax

background: linear-gradient(90deg, #6366f1 0%, #ec4899 100%);

• Direction. 0deg points up, and angles turn clockwise: 90deg runs left to right and 180deg top to bottom. Without a direction, a gradient runs top to bottom.
• Keywords. to right, to bottom, to left and to top are the same as 90, 180, 270 and 0 degrees. to top right aims at a corner, whatever the box's shape.
• Color stops. Each color can take a position, as a percentage or a length. Colors without one are spaced evenly between their neighbors.

Two stops at the same position make a hard line instead of a blend, which is how you draw stripes and split backgrounds:

background: linear-gradient(90deg, #6366f1 50%, #ec4899 50%);

To repeat a pattern across the whole box, use repeating-linear-gradient() with stops that end before 100%.

Layering gradients

background takes a comma-separated list of images, so you can stack gradients. The first one is drawn on top, so give it some transparency to let the layers below show through:

background:
  linear-gradient(135deg, rgb(99 102 241 / 0.8), transparent 60%),
  linear-gradient(45deg, #ec4899, #f59e0b);

The generator builds one gradient at a time: make each layer, copy it, and join them with commas.

Radial and conic gradients

The Radial type draws a circle from the center of the box, and Conic sweeps around the center from the angle you set. To choose a radial gradient's shape and move its center, use the radial gradient generator. To build a color scale for your gradient stops, try the color shades generator.

Frequently asked questions

background: linear-gradient(90deg, #6366f1, #ec4899);
-webkit-background-clip: text;
background-clip: text;
color: transparent;