CODEWITHSUNDEEP
csslinear-gradients
user9209803
user9209803

Reputation:

Hard edged gradient in css?

I was trying to replicate this image in pure css using linear gradient.

enter image description here

I tried to use gradient stops, but all the colors are blending. Is there any way to make a linear gradient hard-edged?

I have tried:

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

and also without using those percentages too, still the same.

Upvotes: 12

Views: 18036

Answers (5)

Nate Whittaker
Nate Whittaker

Reputation: 1966

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: linear-gradient(to left, #252525 0%, #252525 20%, #f5f5f5 20%, #f5f5f5 40%, #00b7b7 40%, #00b7b7 60%, #b70000 60%, #b70000 80%, #fcd50e 80%);
  height: 10px;
}
<hr>

Upvotes: 15

fsarter
fsarter

Reputation: 942

Just use linear-gradient, you can try this.

hr {
  height:10px;
  background: linear-gradient(to right, red 0% 25%, green 25% 50%, blue 50% 75%, grey 75% 100%);
};
<hr>

Upvotes: 2

Wolfgang Criollo
Wolfgang Criollo

Reputation: 158

late to this. but this is my solution, you can set the % on the color where to start and stop and overlap the following that will create a hard stop.

.gradient{
  height:3px;
  background-image:linear-gradient(to left, 
    #252525 0% 20%, 
    #f5f5f5 20% 40%,
    #00b7b7 40% 60%,
    #b70000 60% 80%,
    #fcd50e 80% 100%
  );
}
<div class='gradient' />

Upvotes: 5

Temani Afif
Temani Afif

Reputation: 273077

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>

Upvotes: 10

ceindeg
ceindeg

Reputation: 444

You need to set stops close together to acheive that, so 2 stops per colour value:

background: -webkit-linear-gradient(left, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);
background: linear-gradient(to right, #252525 19%,#f5f5f5 20%,#f5f5f5 39%,#00b7b7 40%,#00b7b7 59%,#b70000 60%,#b70000 79%,#fcd50e 80%,#fcd50e 100%);

I use this tool to generate css gradients, it's fantastic and very useful: http://www.colorzilla.com/gradient-editor/#252525+19,f5f5f5+20,f5f5f5+39,00b7b7+40,00b7b7+59,b70000+60,b70000+79,fcd50e+80,fcd50e+100

Upvotes: 1

Related Questions