The CSS Gradient Syntax I Actually Reach For (Cheat Sheet)

I keep a mental cheat sheet of CSS gradient syntax — the parts I actually use, not the obscure flags nobody remembers. Here it is, written down so you can copy-paste it straight into a project.

If you’ve ever stared at a CSS gradient and thought, “I remember linear-gradient, but what’s the exact syntax for a diagonal fade again?”—this is for you. I’m not going to cover every obscure experimental feature. This is the practical cheat sheet I keep in my own head, written down. You can copy-paste all of these directly into your project.

The Basics: linear-gradient()

The workhorse. You’ll use this in 80% of cases. The syntax is:

background: linear-gradient(direction, color-stop, color-stop);

The direction can be a keyword or an angle. The default is to bottom (top to bottom), which is the same as 180deg.

Angle Keywords vs. Degrees

• Keywords: to top, to right, to bottom, to left. Also diagonal: to top right, to bottom left, etc.
• Degrees: 0deg = to top, 90deg = to right, 180deg = to bottom, 270deg = to left. Positive degrees go clockwise.

Practical example:

/* Diagonal from bottom-left to top-right */
background: linear-gradient(to top right, #ff7e5f, #feb47b);

/* Exact same thing using degrees */
background: linear-gradient(45deg, #ff7e5f, #feb47b);

Wait, that’s not the same. 45deg points to the top-right, but to top right is not exactly 45 degrees—it’s based on the element’s aspect ratio. 45deg is always mathematically 45 degrees. For most UI elements, to top right looks more natural. Use keywords for diagonals unless you need precise math.

Color Stops: The Part You’ll Actually Tweak

You can define stops with lengths or percentages.

/* Even split */
background: linear-gradient(to right, #000 0%, #fff 100%);

/* Uneven split: white starts at 30% */
background: linear-gradient(to right, #000 0%, #fff 30%, #fff 100%);

/* Hard stops: no smooth transition */
background: linear-gradient(to right, #000 0%, #000 50%, #fff 50%, #fff 100%);

That last one is a hard stop. It creates a razor-sharp edge between colors. I use this constantly for stripes, progress bars, and placeholder skeletons. Just remember to repeat the color twice with the same position value.

radial-gradient(): Circles and Ellipses

Radial gradients radiate from a center point. The syntax is:

background: radial-gradient(shape size at position, color-stop);

Shape and Size

• Shape: circle or ellipse (default is ellipse).
• Size: farthest-corner (default), closest-side, farthest-side, closest-corner. Or just use a fixed length like circle 100px.

/* Perfect circle, centered */
background: radial-gradient(circle, #f00, #00f);

/* Ellipse, positioned top-left */
background: radial-gradient(ellipse at top left, #f00, #00f);

/* Circle with a fixed radius */
background: radial-gradient(circle 100px at center, #f00, #00f);

Position uses the same values as background-position: center, top, 20% 80%, etc.

Hard stops work here too:

/* A simple dot */
background: radial-gradient(circle, #000 0%, #000 30%, transparent 30%);

That’s a 30% radius dot. Combine that with background-size and you have a dotted pattern.

conic-gradient(): For Cones, Pie Charts, and Sunbursts

This one starts from a point and sweeps around like a clock. It’s great for pie charts and color wheels.

background: conic-gradient(from angle at position, color-stop);

The from angle is where the gradient starts (default is 0deg at the top). The at position defaults to center.

/* Simple pie chart: red, then blue, then green */
background: conic-gradient(#f00 0%, #f00 25%, #00f 25%, #00f 50%, #0f0 50%, #0f0 100%);

/* A smooth rainbow wheel */
background: conic-gradient(red, yellow, lime, aqua, blue, magenta, red);

Note: Conic gradients don’t have a to keyword. You must use from if you want to rotate it. Also, hard stops are essential for pie charts—you’re literally drawing segments.

Repeating Gradients: Stripes, Without the Hassle

repeating-linear-gradient() and repeating-conic-gradient() are just like their non-repeating versions, but the last color stop defines the cycle length.

/* Horizontal stripes */
background: repeating-linear-gradient(
  to bottom,
  #eee 0px,
  #eee 20px,
  #ccc 20px,
  #ccc 40px
);

/* Diagonal stripes */
background: repeating-linear-gradient(
  45deg,
  #333 0px,
  #333 10px,
  #fff 10px,
  #fff 20px
);

/* Radial bullseye */
background: repeating-radial-gradient(
  circle,
  #fff 0px,
  #fff 10px,
  #000 10px,
  #000 20px
);

This is way cleaner than trying to calculate background-size with a regular gradient. Just remember: the last two stops define the repeat length. Make sure the final stop value is the total width of one stripe cycle.

Layering Multiple Gradients

You can stack as many gradients as you want. They layer like background images—the first one is on top.

background:
  linear-gradient(to right, rgba(0,0,0,0.5), transparent),
  radial-gradient(circle at top, #ffd, #fca);

Use case: A dark overlay on top of a colorful background for text readability. Or, combine a repeating gradient with a solid color for a textured look.

background:
  repeating-linear-gradient(45deg, #444 0px, #444 10px, #555 10px, #555 20px),
  linear-gradient(to bottom, #333, #000);

The second gradient acts as a base layer. Just make sure the top ones have some transparency, or they’ll completely hide what’s underneath.

Gradient Text: The background-clip Trick

This is the classic way to make text with a gradient fill. It works in all modern browsers.

.gradient-text {
  background: linear-gradient(to right, #f00, #00f);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent; /* For older Safari */
}

Important: Set color: transparent and background-clip: text. The -webkit- prefix is still needed for Safari and some Chrome versions. If you skip background-clip: text, the gradient will just paint the whole element box, and you’ll see a rectangle behind your text.

Gradient Borders: Two Reliable Methods

Borders don’t support gradients directly. You have two main options.

Method 1: The border-image Hack (Simple, but Limited)

.border-gradient {
  border: 4px solid transparent;
  border-image: linear-gradient(to right, #f00, #00f) 1;
}

This works. But border-image doesn’t respect border-radius. If you need rounded corners, skip this.

Method 2: The Padding Trick (For Rounded Corners)

This uses a background gradient on the element, then a solid background on an inner wrapper to mask the middle.

.gradient-border {
  background: linear-gradient(to right, #f00, #00f);
  padding: 4px; /* This is your border width */
  border-radius: 8px;
}

.gradient-border > .inner {
  background: #fff; /* Your content background */
  border-radius: 6px; /* Slightly smaller than the parent */
  padding: 16px;
}

This is my go-to for buttons and cards. It’s more HTML, but it handles rounded corners perfectly.

Transparency: rgba() and hsl()

Gradients with transparency are how you create fades, overlays, and highlights. Use rgba() or hsla() for color stops.

/* Fade to transparent */
background: linear-gradient(to bottom, rgba(0,0,0,0.8), rgba(0,0,0,0));

/* Using hsl with alpha */
background: radial-gradient(circle, hsla(120, 100%, 50%, 0.5), hsla(120, 100%, 50%, 0));

Pro tip: If you’re fading to the page background, don’t use transparent as a color stop. transparent is actually rgba(0,0,0,0)—a transparent black. This can cause a weird grayish tint when layered over a light background. Use rgba(255,255,255,0) for a transparent white in those cases.

Browser Support and Performance Notes

All of these syntaxes are supported in every browser from Chrome 69+, Firefox 65+, Safari 12.1+, and Edge 79+. That means you can use them without a prefix. The only exception is conic-gradient, which landed a bit later but is also fully supported now. No need for -webkit-linear-gradient anymore unless you’re supporting IE10/11 (which you shouldn’t be).

Performance: Gradients are rendered by the GPU in most modern browsers. They’re cheap to use, but there are two things to watch:

1. Don’t animate gradients. Changing background properties triggers a repaint, which is expensive. If you need to animate a gradient, use a pseudo-element and animate opacity or transform instead.
2. Large gradients with many color stops can be slightly slower to paint, but you’d need hundreds of stops to notice. Don’t worry about it.

Also, background-size with gradients can cause pixelation if you scale up a repeating pattern. Use fixed pixel sizes for stripes if you want them to stay crisp.

---

That's the whole set. If you want the runnable version with every snippet on one page (plus a gradient generator to preview them live), it's here: https://huegrad.com/blog-css-gradient-cheatsheet