CSS Gradient Generator Guide: Hard Stops, Stripes, and Repeating Patterns for Linear, Radial, and Conic Gradients

Most gradient tutorials stop at the two-color fade. You copy linear-gradient(to right, #3b82f6, #8b5cf6), paste it, and move on. But CSS gradients can produce stripes, checkerboards, polka dots, and pie-chart segments — no images, no JavaScript, no SVG — once you understand the one mechanic that unlocks all of them: the hard color stop.

This guide covers hard stops across all three gradient types, with real code you can run immediately, and notes on where a visual generator saves you the most time.

What a Hard Color Stop Actually Does

A normal gradient blends between stops. A hard stop tells the browser to skip the blend entirely: end one color and start another at exactly the same position.

/* Input */
background: linear-gradient(
  to right,
  #e11d48 50%,
  #1e40af 50%
);

Output: A box split cleanly in half — the left side in red-pink (#e11d48), the right in dark blue (#1e40af), with a perfectly vertical dividing line and no fade between them.

That's the entire mechanic. When two adjacent stops share the same percentage, the color transition collapses to zero width. The browser spec calls it a "color hint at zero-size transition point"; in practice it means one hard edge.

Hard-stop support has been present since Chrome 10, Firefox 3.6, and Safari 5.1, per MDN's browser-compatibility tables — which translates to 99.8% global coverage as of 2024 (caniuse.com data). You don't need a feature query or a fallback for the technique itself.

Diagonal Stripes with `repeating-linear-gradient`

The repeating-* variants tile a gradient segment across the element. Combine that with hard stops and you get stripes.

Subtle diagonal stripe background (common in skeleton screens and loading states):

/* Input */
background: repeating-linear-gradient(
  45deg,
  #f1f5f9,
  #f1f5f9 10px,
  #e2e8f0 10px,
  #e2e8f0 20px
);

Output: Alternating 10 px diagonal bands in light slate (#f1f5f9) and slightly darker slate (#e2e8f0) at a 45° angle. The tile repeats automatically across the element with no visible seam.

I used this pattern on a card grid's loading state last quarter. The striped texture reads as "in progress" more clearly than a flat gray, and it added exactly zero bytes to the network payload — a fair trade-off given that a comparable 40×40 px PNG tile exported from Figma and run through an optimizer typically weighs 280–600 bytes plus one HTTP request.

Bold warning stripes (construction / caution):

/* Input */
background: repeating-linear-gradient(
  -45deg,
  #fbbf24,
  #fbbf24 8px,
  #1c1917 8px,
  #1c1917 16px
);

Output: Yellow-and-black diagonal stripes at -45°, 8 px per band — the same visual language as construction barriers. The three numbers to adjust are the angle (-45deg), the band width (8px), and the full cycle width (16px, which is twice the band width for equal stripes).

Polka Dots and Concentric Rings: `radial-gradient` Patterns

radial-gradient with a hard stop at a small radius creates a circle. Pair it with background-size to tile it into a repeating grid.

Polka-dot background (graph-paper canvas look):

/* Input */
background-color: #f8fafc;
background-image: radial-gradient(
  circle,
  #cbd5e1 1px,
  transparent 1px
);
background-size: 20px 20px;

Output: A near-white surface covered in a regular grid of 1 px slate-gray dots, 20 px apart. The hard stop at 1px means the dot is exactly 1 px and then instantly transparent. Increase both 1px occurrences to 3px for larger dots; increase background-size to 32px 32px to space them further apart.

Concentric rings (target / bullseye pattern):

/* Input */
background: radial-gradient(
  circle,
  #3b82f6 10%,
  transparent 10%,
  transparent 20%,
  #3b82f6 20%,
  #3b82f6 30%,
  transparent 30%
);
background-size: 60px 60px;

Output: Blue rings on a white background. Each hard-stop pair defines one ring: blue from 0–10%, a gap from 10–20%, another ring from 20–30%, then transparent to the tile edge. At 60 px tile size each ring is 6 px wide. This tiling pattern is a common way to render waveform or topographic map textures.

Pie-Chart Slices and Checkerboards: `conic-gradient` Hard Stops

conic-gradient sweeps color around a center point like a clock hand. Hard stops here create pie-chart segments rather than radial circles.

A three-segment pie chart in pure CSS:

/* Input: 40% / 35% / 25% split */
background: conic-gradient(
  #3b82f6 0% 40%,
  #10b981 40% 75%,
  #f59e0b 75% 100%
);
border-radius: 50%;
width: 120px;
height: 120px;

Output: A 120 px circle divided into three wedges — blue for 40% of the sweep (144°), green for 35% (126°), and amber for the remaining 25% (90°). The segment shorthand 0% 40% tells the browser to hold blue from the start angle to 40% of 360°, then switch immediately to green. No SVG, no canvas, no script.

Checkerboard background (single CSS declaration):

background:
  conic-gradient(#334155 90deg, #f1f5f9 90deg 180deg, #334155 180deg 270deg, #f1f5f9 270deg)
  0 0 / 40px 40px;

Output: A classic checkerboard in dark slate and off-white. The 40×40 px tile contains four 20×20 px quadrants, one per 90° sweep segment. Hard stops at every 90° boundary make the color changes instant. Adjust the two hex values to change the square colors; adjust 40px 40px to resize the squares.

Where a Visual Generator Saves Time

Writing stop positions by hand works well for simple patterns but becomes tedious for gradients with more than four stops, or when you need to compare angle variations quickly. The CSS Gradient Generator lets you drag stops on a live canvas, switch between linear, radial, and conic modes, and copy the final background: declaration. For multi-stop conic pie charts in particular, it's faster to drag the segment boundaries visually than to calculate the exact percentages.

For text that fades through multiple colors — a common hero heading effect — the CSS Text Gradient Generator handles the background-clip: text setup automatically and previews how the gradient looks on actual letterforms, which is hard to judge from code alone.

Browser Support and Fallbacks

The repeating-linear-gradient and radial-gradient patterns above work in every browser released since 2013. conic-gradient landed in Chrome 69 (2018) and Firefox 83 (2020). For browsers that predate conic support, write a solid-color fallback first — the standard CSS cascade handles it:

/* Fallback for old Firefox */
background: #3b82f6;
/* Conic for capable browsers — old browsers ignore this declaration */
background: conic-gradient(
  #3b82f6 0% 40%,
  #10b981 40% 75%,
  #f59e0b 75% 100%
);
border-radius: 50%;

Browsers that don't understand conic-gradient leave the second background declaration unparsed and fall back to the solid blue. No JavaScript feature detection, no class toggling — the cascade does the work.

Made by Toolora · Updated 2026-06-30