Some links on this page are affiliate links: if you buy through them we may earn a commission, at no extra cost to you.
A CSS hard-stop gradient changes color abruptly instead of blending: place adjacent color stops at the same position. For example, linear-gradient(red 50%, blue 50%) switches from red to blue at the midpoint. The technique works with ordinary linear, radial, and conic gradients; the right stop positions let you make bands, stripes, rings, and tiled patterns without separate image assets.
What makes a gradient a hard-stop gradient?
A gradient normally interpolates between neighboring color stops. If the stops are separated, the browser blends across that interval. In this example, red transitions gradually to blue:
.smooth {
background: linear-gradient(red 50%, blue);
}Make the second stop begin where the first ends and there is no interval for a gradual blend:
Do these 3 things before closing this tab:
1Scan for outdated or missing drivers - takes under a minute2Clear out junk files and repair common Windows errors3Fix the driver behind crashes, sound loss and screen glitches.hard {
background: linear-gradient(red 50%, blue 50%);
}The color changes at 50%. A hard stop is a technique, not a separate CSS function: the usual gradient functions create it through stop positions. CSS-Tricks demonstrates the idea in its Hard Stop Gradients chapter; MDN documents equal-position stops and multi-position syntax in its linear-gradient reference.
#1 Best Overall
- HTML CSS Design and Build Web Sites
- Comes with secure packaging
- It can be a gift option
Use multi-position stops for concise bands
In modern CSS, one color can be assigned both the start and end of its span:
.split {
background: linear-gradient(
to right,
red 0 50%,
blue 50% 100%
);
}This is equivalent to repeating each color at its boundary:
background: linear-gradient(
to right,
red 0,
red 50%,
blue 50%,
blue 100%
);The concise form is easier to scan when defining multiple solid bands. Both forms set two positions for each color and create an immediate boundary where the spans meet.
Choose stop positions for the layout
Percentages and lengths solve different problems. Percentages divide the gradient proportionally; lengths define distances along its gradient line. Gradients are image values used in background or background-image, not background-color. Their rendered area comes from the element or background image area, rather than an intrinsic image size, as MDN explains in its linear-gradient reference.
| Need | Use | Example |
|---|---|---|
| Proportional, responsive regions | Percentages | #e63946 0 25%, #f1fa8c 25% 50% |
| Known band widths | Lengths such as pixels | #222 0 40px, #555 40px 80px |
| Regular stripes across an area | A repeating gradient or a sized gradient | Use repeating-linear-gradient() or set background-size. |
For example, these percentage spans divide a box into four responsive regions:
.palette {
min-height: 8rem;
background: linear-gradient(
to right,
#e63946 0 25%,
#f1fa8c 25% 50%,
#457b9d 50% 75%,
#1d3557 75% 100%
);
}Fixed lengths are useful when a stripe should stay a known width, but a finite gradient does not by itself create an endlessly repeated pattern. Use a repeating gradient or size and repeat a gradient image when the box can be larger than the specified spans. For diagonal gradients, percentages are measured along the gradient line, so a stop at 10% does not necessarily make a stripe 10% of the box’s horizontal width.
Make segmented backgrounds and meters
A hard-stop gradient can paint several color zones behind one element. This suits decorative backgrounds, section bands, and simple visual indicators:
The Tool Desk
Outbyte PC Repair FREERepair Windows errors before they cause bigger problemsFix Now →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →.columns {
min-height: 12rem;
background: linear-gradient(
to right,
#f94144 0 33.333%,
#f9c74f 33.333% 66.666%,
#90be6d 66.666% 100%
);
}
.meter-visual {
--value: 72%;
background: linear-gradient(
to right,
#22c55e 0 var(--value),
#e5e7eb var(--value) 100%
);
}The gradient paints a background; it does not create separate layout boxes. Use Grid, Flexbox, or individual elements when regions hold independent content, need their own interaction or focus, or must reflow independently. A custom property keeps a changing boundary maintainable, but ensure dynamic values are supplied and valid. A missing or malformed value can invalidate the declaration, so provide a fallback or a separate default style where the value is not guaranteed.
For a real progress indicator, do not make color the only source of its value. Use a semantic element where appropriate, such as <progress value="60" max="100">60%</progress>, or expose the value in associated text. A purely decorative overlay can be hidden from assistive technology when equivalent information is supplied elsewhere.
Create repeating stripes—and test diagonal ones
repeating-linear-gradient() repeats the stop pattern across the painted area. Here each diagonal stripe is 10 pixels wide within a 20-pixel repeat interval:
Rank #3
- Brand: Wiley
- Set of 2 Volumes
- A handy two-book set that uniquely combines related technologies Highly visual format and accessible language makes these books highly effective learning tools Perfect for beginning web designers and front-end developers
.stripes {
background: repeating-linear-gradient(
45deg,
#000 0 10px,
#fff 10px 20px
);
}For an overlay on a blue surface, transparency can preserve the base color:
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
.striped-button {
background-color: #2563eb;
background-image: repeating-linear-gradient(
45deg,
transparent 0 9px,
rgb(255 255 255 / 0.3) 9px 10px
);
}The repeat interval comes from the distance between the stops that define one pattern. Make that interval nonzero and explicit. The function is widely supported in current browsers; see MDN’s repeating-linear-gradient reference and the CSS Images Level 3 specification.
Why thin angled stripes can look uneven
Narrow diagonal stripes may appear lighter, thinner, or uneven because the pattern is rasterized onto device pixels at subpixel positions. CSS-Tricks documents this behavior and an alternative in No-Jank CSS Stripes. One possible sized-gradient approach is:
.stripes-sized {
background-image: linear-gradient(
45deg,
#111 0 10px,
#444 10px 11px
);
background-size: 15.556px 15.556px;
}That size is specific to the example geometry, not a universal setting. For a production pattern, check its actual angle and stripe thickness at the target viewport sizes and device-pixel ratios. Thicker bands are less prone to visible irregularity. If exact, print-like regularity is essential, consider a carefully constructed SVG or raster asset instead.
Make rings with radial gradients
Radial gradients position stops outward from a center point. Assigning each color a range produces concentric bands:
.radial-bands {
background: radial-gradient(
circle,
#0ea5e9 0 20%,
#22c55e 20% 40%,
#facc15 40% 60%,
#ef4444 60% 80%,
#111827 80% 100%
);
}For regularly repeated rings, use a repeating radial gradient with explicit lengths:
.rings {
background: repeating-radial-gradient(
circle,
#222 0 10px,
#777 10px 20px
);
}These are useful for decorative targets, radar-like backgrounds, and simple patterns. MDN documents the functions in its radial-gradient reference and repeating-radial-gradient reference.
Use conic stops for pie-like visuals
A conic gradient distributes colors around a center, making it possible to paint a pie-like circle without separate wedges:
.pie-visual {
aspect-ratio: 1;
border-radius: 50%;
background: conic-gradient(
#ef4444 0 25%,
#3b82f6 25% 60%,
#22c55e 60% 100%
);
}The same boundaries can be expressed as angles: 25%, 60%, and 100% of a full turn correspond to 90deg, 216deg, and 360deg. A conic gradient is a visual treatment, not an accessible chart by itself: the background does not expose segment labels, values, or relationships to assistive technology. Include the data in text or a table, or use an accessible SVG or chart implementation. MDN makes this distinction in its conic-gradient reference.
Quick wins for a faster PC:
Clear out junk files and repair common Windows errorsFree Scan →Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Repair Windows errors before they cause bigger problemsFix Now →Layer gradients for grids and checkerboards
Multiple background images can combine independent directions. The first listed image is painted on top of later backgrounds. Two linear gradients make a grid:
Best Value
.grid-paper {
background-image:
linear-gradient(
to right,
rgb(0 0 0 / 0.12) 1px,
transparent 1px
),
linear-gradient(
to bottom,
rgb(0 0 0 / 0.12) 1px,
transparent 1px
);
background-size: 2rem 2rem;
background-color: #f8fafc;
}A conic gradient can make a compact checkerboard tile. Custom properties make repeated colors and tile dimensions easier to adjust:
:root {
--tile: 2rem;
--dark: #111827;
--light: #f9fafb;
}
.checkerboard {
background:
conic-gradient(
var(--dark) 25%,
var(--light) 0 50%,
var(--dark) 0 75%,
var(--light) 0
)
0 0 / var(--tile) var(--tile);
}Gradient stops define the pattern inside the gradient image; background-size scales that image, background-position moves it, and background-repeat tiles it when smaller than its painting area. Positioning does not change the stop values themselves.
Keep color meaning and semantics intact
Hard-stop gradients work best when the graphic is decorative or presentational. They do not, by themselves, provide text, labels, interaction, or accessible meaning. Avoid relying on color alone for success versus error, required fields, categories, or progress. Add text or another cue, and check that adjacent bands remain distinguishable for users with color-vision deficiencies. A chart-like background needs a textual or semantic data representation as well.
When to use a gradient—and when not to
- Use CSS gradients for simple decorative bands and algorithmic patterns that should scale with an element.
- Use separate elements or Grid/Flexbox when zones contain content, have independent behavior, or need responsive layout changes.
- Use SVG or a chart library when geometry is data-driven or the graphic needs labels, interaction, keyboard support, or semantic structure.
- Use an image asset when the artwork is complex, exact raster appearance matters, or CSS rendering artifacts are unacceptable.
Gradients avoid a separate image download and are generated rather than stored as a fixed raster, but the browser still has to paint them. Many layers, large areas, or frequent animation are not automatically faster than an asset; test the actual effect in the application.
Quick Recap
Quick checks when a boundary does not look right
- The colors blend: confirm that the next color starts at the previous color’s ending position. Stops such as red at 50% and blue at 70% deliberately leave room for a blend.
- The pattern does not repeat: make the first-to-last stop interval explicit and nonzero, and check the background size and repeat settings.
- The gradient declaration is ignored: put the gradient in
background-imageorbackground;background-coloraccepts a color, not a gradient image. - A band seems narrower on a diagonal: percentage positions follow the gradient line, not necessarily the box’s horizontal or vertical axis.
- Stops are hard to reason about: list them in ascending order and use multi-position stops for clear, solid ranges. Out-of-order positions can be valid but make transitions harder to maintain.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
