Hey everyone.
I want to make a three-colored background with linear gradient,and I got the pattern I want but I’m getting fuzzy edges where each color ends, and I think I need sharp edges.
This is my code:
background: linear-gradient(to right, hsl(146, 53%, 65%) 0, hsl(146, 53%, 65%) 20%, hsl(146, 53%, 55%) 20%, hsl(146, 53%, 55%) 80%, hsl(146, 53%, 65%) 80%, hsl(146, 53%, 65%) 100%);
Can anyone help me out? I’ve been struggling with it for hours, searched all over the internet and nothing!
Thanks in advance!!
your gradient looks very straight! Maybe I’m misunderstanding you. What do you mean by fuzzy edges?
(just adding a screen shot of what I see when I paste your code into a sample html file)
It does look sharp in your picture!
It looks like this on my page:
here’s my pen with the rest of my code:
https://codepen.io/virginiab/pen/qKNvvg
It has a background now (I gave up, lol), but I’d love to sort this one out!
Thank you!!! 
Ok, so it’s the one in the style definition for ‘main’ right?
Which browser do you use? Maybe that is affecting things. (I tried to paste your code into both ‘main’ and ‘body’ and the result was still sharp for me). I am on firefox at the moment.
Yes, exactly! I’m using Chrome.
I tried it on Firefox and it’s still fuzzy. A bit less fuzzy, but still
could there be another element messing things up?
One way to test it for sure is to create a simple html file with the code and see if you like the result.
if I do that it’s still fuzzy on Chrome but a lot better on Firefox.
I’ll do some reading on browser support of linear gradients, but I’ve seen a bunch of websites using repeating linear gradients and such! even in the FCC tutorial about gradients it worked great. 
hmm, looks like you’re not the only one with this issue:
1 Like
Not that you asked but, I like the veg background better than the gradient (if that is what you were planning to use it for). So you may be better off without it style-wise (if you trust a complete stranger’s sense of style that is!).
1 Like
Hahaha yeah! I like the veggies better too 
I tried making the stripes narrower and the fuzziness goes away. I guess it has something to do with that. This looks perfectly sharp on my Chrome:
1 Like
Works good on firefox too.