Hard edged gradient in css?

Question

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

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.

A linear gradient is a field of color which smoothly changes from one color to another (or more than two). — gsquaredxc, Apr 03 '18 at 17:10
Use the same color value at two directly adjacent "stops", say red from 0 to 19.999%, blue from 20 to 39.999%, etc. — CBroe, Apr 03 '18 at 17:15
I didn't realize that I had to put the same value twice, to have the color in a range. Thanks for this! Still, at the point where they merge, there's blurriness. Any way to fix this? — , Apr 03 '18 at 17:22

score 14 · Answer 1 · edited Jun 03 '22 at 06:00

14

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>

edited Jun 03 '22 at 06:00

cloned

6,346
4
26
38

answered Apr 03 '18 at 17:33

Nate Whittaker

1,866
15
14

is blurring between them a browser issue? because I can't seem to remove it. Thanks anyways – Apr 03 '18 at 17:36
If you've set the stop positions correctly, I wouldn't expect to see a color gradation in any modern browser. – Nate Whittaker Apr 03 '18 at 17:57
check this pen https://codepen.io/anon/pen/LdBWmX i used your method, it blurs when merges. – Apr 03 '18 at 18:17
The pen looks sharp enough to me. I'm assuming the blurriness you're seeing is from sub-pixel antialiasing? If so, it's adjusting the color stops to take place on whole pixel values might be the only way to get the sharpness you're looking for. – Nate Whittaker Apr 03 '18 at 18:35
There's no need to specify the same colors twice. As documented on [the MDN page](https://developer.mozilla.org/en-US/docs/Web/CSS/gradient/linear-gradient) you can specify two numbers for the color stops. The first one is more of a *color start*. Demo: https://codepen.io/VAggrippino/pen/PoaYbmd – Vince Oct 24 '22 at 01:13

score 9 · Accepted Answer · answered Apr 03 '18 at 19:18

9

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>

answered Apr 03 '18 at 19:18

Temani Afif

245,468
26
309
415

1

Wow, just what i was looking for! Though it is kind of hacky, but still, works like charm! – Apr 04 '18 at 08:36
@popcorn no it's not hacky :) we simply use multiple background instead of one, and we can do a lot of magic with it ;) – Temani Afif Apr 04 '18 at 08:38
by hacky i meant, we still have to calculate background size for all of the colors and have to define all gradients individually. nonetheless, thanks for the answer – Apr 04 '18 at 09:25

score 4 · Answer 3 · answered Dec 31 '20 at 20:25

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' />

score 2 · Answer 4 · answered Jan 17 '22 at 09:42

2

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>

answered Jan 17 '22 at 09:42

fsarter

902
7
10

score 1 · Answer 5 · answered Apr 03 '18 at 17:20

1

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

answered Apr 03 '18 at 17:20

ceindeg

434
5
9

That's actually good, but still I can see blurry lines, where colors still merge. Is there any other way? – Apr 03 '18 at 17:25
You can use the import image tool on colorzilla to get the gradient to match up. – JeremyE Apr 03 '18 at 17:30
You can use decimal places to bring the stops closer together, for instance `#252525 19.9%,#f5f5f5 20%` that might help. I haven't tested this cross browser. – ceindeg Apr 03 '18 at 22:27
@ceindeg tried that a few time, seems like chrome is ignoring the decimals. – Apr 04 '18 at 08:33
The answer on this Q seems like it may solve your issue: https://stackoverflow.com/questions/26652661/blurry-linear-gradient-stops-in-chrome it points to this fiddle http://jsfiddle.net/cyq7grdr/11/ – ceindeg Apr 04 '18 at 12:33

Hard edged gradient in css?

5 Answers5

Linked

Related