CSS Gradient Generator

Linear, radial and conic gradients

Each function takes a direction or shape, then color stops. A stop's percentage is measured along the line for linear, outward from the center for radial, and around the circle for conic.

• linear-gradient(angle, stops): 0deg points up and angles turn clockwise, so 90deg runs left to right. Without an angle the default is to bottom (180deg). Corner keywords like to top right adjust their angle to the element's shape.
• radial-gradient(shape at position, stops): spreads from a point as a circle or an ellipse (the default). The generator uses the default size, farthest-corner; by hand you can write closest-side or a length, as in circle 120px at center, for a smaller glow.
• conic-gradient(from angle at position, stops): sweeps around a point clockwise from the top. Use it for color wheels, pie charts and spinners.
• repeating- in front of any of them repeats the stops from the first position to the last.

Hard edges, transparency and fallbacks

Two stops at the same position switch color with no blend, which is how the pie chart and the Stripes preset get their sharp lines.

For transparency, use 8-digit hex such as #ff000080 (80 is about 50% opacity) or rgba(255, 0, 0, 0.5). Picking a new color with the picker keeps the stop's transparency. To fade out, end on the same color at zero alpha, like #0f172a00, rather than the transparent keyword, which some older browsers blended through gray.

A browser that can't read a gradient ignores the whole declaration. To support old browsers, put a plain color such as background: #2193b0; on the line before the gradient.

Browser support and Tailwind CSS

Linear and radial gradients work in every browser in use today. Conic gradients need Chrome 69, Edge 79, Safari 12.1 or Firefox 83.

CSS Code uses the background shorthand, which also resets background-color, background-size and the other background properties. If you set those separately, put the value in background-image instead. When the stylesheet is done, the CSS Minifier shrinks it without touching your gradients, and the HTML Minifier does the same for pages with a <style> block.

The Tailwind CSS class is an arbitrary value with spaces turned into underscores, since class names can't contain spaces. Tailwind v3 compiles it to background-image, and v4 reads the same class. v4 also has its own utilities: bg-linear-to-r (bg-gradient-to-r in v3), angles like bg-linear-45, bg-radial, bg-conic, and color space modifiers such as bg-linear-to-r/oklch.

Why some gradients look gray in the middle

Hex and rgb() colors are mixed in sRGB by default, and opposite colors meet in a dull middle: halfway from blue #0000ff to yellow #ffff00 is rgb(127.5, 127.5, 127.5), plain gray.

CSS Color Level 4 lets you pick the color space. Add in oklch after the angle and the middle stays bright. Chrome and Edge 111, Safari 16.2 and Firefox 127 support it, and older browsers skip the declaration, so keep a normal gradient above it.

background: linear-gradient(90deg, #0000ff, #ffff00);
background: linear-gradient(90deg in oklch, #0000ff, #ffff00);

Gradient text, borders, page backgrounds and animation

Four common ways to use the gradient you copied. For text, write background before background-clip, because the shorthand resets the clip. For a rounded border, layer two backgrounds, since border-image ignores border-radius. For a page, give html a minimum height, or the gradient restarts below short content. To animate, register the angle with @property (Chrome 85, Safari 16.4, Firefox 128) and animate that, because browsers can't blend one gradient image into another.

.headline {
  background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.card {
  border: 3px solid transparent;
  border-radius: 12px;
  background:
    linear-gradient(#fff, #fff) padding-box,
    linear-gradient(135deg, #2193b0 0%, #6dd5ed 100%) border-box;
}

html {
  min-height: 100%;
}

body {
  background: linear-gradient(180deg, #0f2027 0%, #203a43 50%, #2c5364 100%);
}

@property --angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

.spinner {
  background: conic-gradient(from var(--angle), #ff7e5f 0%, #feb47b 50%, #ff7e5f 100%);
  animation: turn 3s linear infinite;
}

@keyframes turn {
  to {
    --angle: 360deg;
  }
}