Hard edged gradient in css?

Solution 1:

Specifying the same stop position for adjacent color stops should produce the hard edge. The standard linear-gradient syntax allows for color hinting (cutting down on the verbosity of this background style), but not all browsers appear to support it.

hr {
  background-image: -webkit-linear-gradient(left, #252525 0%, #252525 20%, #f5f5f5 20%, #f5f5f5 40%, #00b7b7 40%, #00b7b7 60%, #b70000 60%, #b70000 80%, #fcd50e 80%);
  height: 10px;
}

<hr>

Solution 2:

What about multiple gradient like this:

.line {
  height:5px;
  background-image:
    linear-gradient(red,red),
    linear-gradient(blue,blue),
    linear-gradient(yellow,yellow),
    linear-gradient(purple,purple);
  background-size:
    calc(1 * (100% / 4)) 100%,
    calc(2 * (100% / 4)) 100%,
    calc(3 * (100% / 4)) 100%,
    calc(4 * (100% / 4)) 100%;
  background-repeat:no-repeat;
}

<div class="line">
</div>

Hard edged gradient in css?

Solution 1:

Solution 2:

Related

Recent Posts