Hard Stop Gradients - CSS-Tricks

The word “gradient” implies a transition from one color to another color. That’s super useful in web design and can create lovely effects. We’re going to skip that whole “transition” part though and see what kind of CSS trickery that unlocks.

Here’s an example of “traditional” gradients where colors slowly fade from one to another.

These are all created with CSS gradients.

There is a concept called color-stops with gradients that allow you to control the position of where colors start transitioning from one to the next. Here’s an example where the first color hangs on for most of the way:

.stripe {
  height: 100px;
  background: linear-gradient(to right, red 85%, blue);
}

Here’s the trick: the color stops can get closer and closer to each other, and actually be at the same point. Meaning that instead of the color transitioning at all, one color stops and the other color can start at an exact point. Here’s a visual explanation of converging color stops:

The bottom example there almost looks like it’s two separate elements with two separate backgrounds, but nope, it’s a single element with hard-stop gradients splitting the space visually. If you needed to make vertical columns and handle their backgrounds all on one parent element, this is a possibility! In fact, because the background will cover the whole area, you don’t have to worry about the elements “stretching” the full height, which made this a great trick when we needed to make columns based on floats or inline-block elements.

Extending the concept of hard stops, we can make a color-striped bar. Here are variations of it made by moving the background-position.

.stripe {
  height: 15px;
  background: linear-gradient(
    to right, 
    red,
    red 20%,
    orange 20%,
    orange 40%,
    yellowgreen 40%,
    yellowgreen 60%,
    lightblue 60%,
    lightblue 80%,
    purple 80%,
    purple
  );
  margin: 0 0 20px 0;
}

.stripe:nth-child(2) {
  background-position-x: -10vw;
}

.stripe:nth-child(3) {
  background-position-x: -20vw;
}

Speaking of stripes, these hard-stop gradients are great for striped backgrounds of any kind. It gets a little easier with repeating gradients (e.g. repeating-linear-gradient()) as you don’t have to fill 100% of the space, you can use pixels and stop where you need to.

.stripes {
  background-color: #ffd600;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 9px,
    #f4ff81 9px,
    #f4ff81 10px
  );
}

.stripes {
  background-color: #cfd8dc;
  background-image: repeating-linear-gradient(
    45deg,
    transparent,
    transparent 1px,
    #90a4ae 1px,
    #90a4ae 2px
  );
}

.stripes {
  background-color: #e53935;
  background-image: repeating-linear-gradient(
    10deg,
    transparent,
    transparent 20px,
    #c62828 20px,
    #c62828 23px
  );
}

.stripes {
  background-color: #689f38;
  background-image: repeating-linear-gradient(
    -25deg,
    transparent,
    transparent 40px,
    #aed581 40px,
    #aed581 50px
  );
}

.stripes {
  background-image: repeating-linear-gradient(
      90deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    repeating-linear-gradient(
      0deg,
      rgba(224, 82, 67, 0.5) 0px,
      rgba(224, 82, 67, 0.5) 40px,
      transparent 40px,
      transparent 80px
    ),
    linear-gradient(90deg, hsl(250, 82%, 1%), hsl(250, 82%, 1%));
}

.stripes {
  background-image: repeating-linear-gradient(
      45deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 10px,
      transparent 10px,
      transparent 100px
    ),
    repeating-linear-gradient(
      90deg,
      hsla(312, 0%, 63%, 0.05) 0px,
      hsla(312, 0%, 63%, 0.05) 50px,
      transparent 50px,
      transparent 100px
    ),
    linear-gradient(90deg, hsl(80, 0%, 20%), hsl(80, 0%, 20%));
}

There are other types of gradients as well! We can use hard-stops with radial-gradient and repeating-linear-gradient as well!

.stripes {
  background: repeating-radial-gradient(
    circle at 100%,
    #333,
    #333 10px,
    #999 10px,
    #999 20px
  );
}

.stripes {
  background-image: radial-gradient(#90caf9 20%, transparent 20%),
    radial-gradient(#1e88e5 20%, transparent 20%);
  background-color: #64b5f6;
  background-position: top left, 50px 50px;
  background-size: 100px 100px;
}

.stripes {
  background-image: radial-gradient(
    circle at top left,
    #ec407a,
    #ec407a 20%,
    #7e57c2 20%,
    #7e57c2 40%,
    #42a5f5 40%,
    #42a5f5 60%,
    #26a69a 60%,
    #26a69a 80%,
    #9ccc65 80%
  );
}

.stripes {
  background: repeating-radial-gradient(
    circle at bottom right,
    #eee,
    #ccc 50px
  );
}

Notice in that last example, you still see some color fading stuff going on. A hard-stop gradient doesn’t have to be used exclusively. That one has just one hard stop that repeats.

Conical gradients are another prime canidate for hard stop gradients, as when applied into a circle (e.g. border-radius: 50%) they become instant pie charts!

.chart {
  background: conic-gradient(
    #f15854 4%,
    #4d4d4d 0 8%,
    #5da5da 0 17%,
    #decf3f 0 48%,
    #b276b2 0 54%,
    #faa43a 0
  );
  border-radius: 50%;
  height: 0;
  padding-top: 100%;
}