Quackyard
  • Loading…

CSS Gradient Generator

Build linear, radial and conic gradients by eye: drag the color stops, try a preset and copy the CSS.

Background
background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #fb923c 100%);
With a solid fallback first
background: #c6518b;
background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #fb923c 100%);
Presets
Type
Color stops
Drag a handle, or focus one and press an arrow key.
Color interpolation

Colors blend in sRGB, the way gradients have always mixed. Every browser reads it.

Runs in your browser. Nothing you enter is sent anywhere.

How to use it

Start from the default or one of the Presets, then adjust:

  1. Pick a Type. Linear has an Angle from 0 to 360. Radial has a Shape, circle or ellipse, and a Position such as center or top left. Conic has a Start angle and a Position.
  2. Edit the Color stops. Drag a handle along the strip, or focus one and press an arrow key to move it 1% (10% with Shift). Each stop has a color picker, a text box, a position in percent and Remove. Add stop fills the widest gap with a color matching its neighbors.
  3. Tick Repeating to tile the stops, and under Color interpolation choose sRGB or OKLCH for how the colors blend.

The preview updates as you go, in the page. Background holds the declaration, with Copy CSS; With a solid fallback first adds a flat color line before it, with Copy both lines. If a stop’s text isn’t a color, the message names the stop.

Examples

The default, Dusk: Linear at 135, three stops at 0%, 55% and 100%:

background: #c6518b;
background: linear-gradient(135deg, #7c3aed 0%, #db2777 55%, #fb923c 100%);

Background shows only the second line; the first is the stops’ average.

Blue to yellow, Linear at 90, stops blue at 0 and yellow at 100, with OKLCH:

background: #808080;
background: linear-gradient(90deg in oklch, blue 0%, yellow 100%);

The fallback, #808080, is also the gray an sRGB blend passes through at the midpoint; in oklch keeps it saturated. A note under the code says in oklch needs Chrome or Edge 111+, Safari 16.2+ or Firefox 127+; older browsers drop the whole declaration and keep the fallback.

Diagonal stripes, Linear at 45 with Repeating, and pairs of stops sharing a position:

background: #87792c;
background: repeating-linear-gradient(45deg, #111 0%, #111 5%, #fde047 5%, #fde047 10%);

Two stops at 5% make a hard edge, and the pattern ends at 10%, so it repeats ten times.

An oklch() stop color, oklch(0.7 0.1 200) as stop 2, gives Stop 2: This tool reads hex, rgb(), hsl() and named colors; it can't read "oklch()". Try #ff5733, rgb(255 87 51), hsl(210 50% 40%) or a name like rebeccapurple. OKLCH sets how stops blend, not how they’re written.

Good to know

  • Angles point the way the gradient travels, per CSS Images: 0deg is up and 90deg right, turning clockwise. 180deg is the default, top to bottom. A conic Start angle turns where the first stop begins.
  • Stops are written sorted by position. A browser moves an out-of-order stop up to the one before it; this tool sorts instead, so #000 50%, #fff 0%, red 50% comes out as #fff 0%, #000 50%, red 50%. Stops at the same position keep the order you gave them.
  • Repeating only shows when the stops end before 100%. Positions are percentages of the gradient line, or of a full turn for Conic, so Sunburst’s stops at 0% and 25% repeat four times around the circle.
  • The fallback is an average of the stops in sRGB, whatever their positions, weighting each color by its alpha as CSS does: red to transparent falls back to #ff000080, red at half opacity. It matters mainly with in oklch.
  • Stop colors are hex, rgb(), hsl(), the 148 CSS names and transparent. HSL saturation and lightness need a %. The color picker writes #rrggbb and drops alpha; type #0ea5e900 for a see-through stop.
  • Radial gradients use the default size, farthest-corner: a stop at 100% lands on the corner farthest from the position.
  • A gradient takes 2 to 10 stops, each from 0% to 100%, with up to 80 characters of color text.

Questions

How do I make a linear gradient in CSS?

Set background to linear-gradient() with a direction and at least two stops: background: linear-gradient(135deg, #7c3aed 0%, #fb923c 100%);. The direction can be an angle or a keyword like to right; stops without positions spread evenly.

How do I make a gradient cover the whole page?

Put it on body and give html a min-height: 100%. A page shorter than the window otherwise repeats the gradient in bands, because a background on body is sized to the root element, which is only as tall as the content.

What’s the difference between linear, radial and conic gradients?

A linear gradient changes color along a straight line, a radial one outward from a point, and a conic one around a point, like a clock hand. Conic draws pie charts: conic-gradient(red 0% 25%, blue 25% 100%) draws a quarter slice.

Why does my gradient look gray in the middle?

Because gradients blend in sRGB by default, and the straight line between two opposite hues runs through gray: blue and yellow meet at #808080. Choose OKLCH, which blends lightness, chroma and hue separately, or add a stop with the middle color you want.