CSS Gradient Generator

How to use the CSS Gradient Generator

1. Choose Linear or Radial gradient type.
2. For linear, drag the Direction slider to set the angle.
3. Pick colors for each stop. Click + Add stop to add more. The preview and CSS update in real time.
4. Click Copy to copy the ready-to-use CSS background property.

CSS gradient syntax

Linear gradients transition colors along a straight line:

background: linear-gradient(90deg, #FF5733, #3498DB);

The angle can be in degrees (0deg = bottom to top, 90deg = left to right, 180deg = top to bottom) or as a direction keyword: to right, to bottom right.

Radial gradients transition colors outward from a center point:

background: radial-gradient(circle, #FF5733, #3498DB);

The shape can be circle or ellipse.

Color stops

Both gradient types support any number of color stops. You can specify optional positions to control where each color starts:

background: linear-gradient(to right, red 0%, yellow 50%, green 100%);

Without explicit positions, colors are spaced evenly.

Using gradients in CSS

• Background: background: linear-gradient(...);
• Background image: background-image: linear-gradient(...);
• Border: use border-image with a gradient to create gradient borders
• Text: combine background-clip: text with -webkit-text-fill-color: transparent for gradient text
• Mask: use a gradient as a mask-image for fade-out effects at element edges

Browser support

linear-gradient and radial-gradient have full support across all modern browsers since IE 10. No prefix is needed for current browsers.