My linear-gradient is pixelated, is there any way to unpixelize it?

background: linear-gradient(50deg, orange 0%, orange 40%, orangered 0%, orangered 60%)

You are starting the orangered at 0%, the beginning, that’s causing a hard edge at 40% where orange ends.
You need to start orangered some place after 40%, like 50% or wherever.

background: linear-gradient(50deg, orange 0%, orange 40%, orangered 50%, orangered 60%)

I am sorry but that didn’t help. As you could see from the fork, sadly it even made the gradient synchronized instead of separated as in the original (pixelated) example.

It would be helpful to know what effect it is you want to achieve.
All I know is you don’t like how it is now, but I have no idea what kind of gradient you do want.

So you want a hard edge, but aliased? The same thing applies. Try:-

background:
linear-gradient(50deg, orange 0%, orange 40%, orangered 40.1%, orangered 60%)
2 Likes

Yes you will have to blur it a little as Sam has shown above or change the angle until its smooth.

e.g.

background:
linear-gradient(45deg, orange 0%, orange 40%, orangered 0%, orangered 60%);

Sams example is best as it doesn’t change the angle.

Sorry Sam, but the particular edge there still wasn’t hard-enough (didn’t know I should say “hard-edge” in English, nice to learn it finally).

Anyway, here is another solution I just created that does indeed give the hard edge I needed. Its less minimal, but it exactly what I needed:

Still looks very pixelated to me unlike Sam’s example which is very smooth and to ‘my’ naked eye looks like a single line and much more preferable.

I don’t know what you saw there but my solution works best for me. Unlike in Sam’s example (first image), I see there a totally hard-edged crossing (second image).

Sitepoint seems to me to pixelate attachments for better performance but in any way you can clearly see the second attachment features less pixelated crossing between the colors.

Hi,

This is what I see in chrome.

Your example is the pixelated one on top.

I know which one I prefer :slight_smile:

1 Like

I don’t use Chrome and checked the site only with Mozilla. For me, my example doesn’t look pixelated at all in neither Mozilla nor in Edge. Here is a picture of how it seems in Mozilla 46.0.1:

In chrome, on the other hand, it does look pixelated as in your image.

Yet, Sam’s solution seems pixelated/smeared in my Moizlla firefox… So, in this case, nothing really works cross-browser in a satisfying way for me.

Yes mozilla and edge’s rendering has always been better than chrome and the pixellated appearance in chrome is a known bug but the fact remains that Chrome has nearly 60% of the audience these days and Firefox is down to about 15% and edge/ie about 10% so you really should be concentrating on Chrome first and then the other browsers second.

It is unlikely that you will get a perfect result unless you use angles like 45 degrees which should be fine in all.

Here is how Sam’s example looks in IE11, Ie edge, Firefox and Chrome (Windows 10).

That looks pretty good to me but of course may differ by monitor and the size the element is displayed at.

1 Like

As you know, my method goes with 50% on 50% for both colors. Till now its angle was 50deg but I’ve now changed it to 45 and it seems to appear fine in IE11, Edge, Chrome, and Firefox. Here are examples respectively:

New readers: Note that Sitepoint lowers the quality of the attached images for performance.

Anyway, it looks fine to me from Windows 10. It can be seen in detail here.

Here is a link to the updated codepen (general, unedited for a particular project).

Since I am far from being a mathematician (or something of the sort) or a browser-software programmer, I can’t actually explain why the changing of the deg remove the pixelization so prominently. Maybe you could shed some light on this.

That link goes to a .biz site but the angled gradient is not to be seen. Where is it?

FYI only, your images do not seem to be full rez captures, they seem to have been scaled down somewhat before they were uploaded to Discourse.

I’m not so sure about that. The displayed image may be reduced in quality, but if reduced in size for display purposes, the size and quality of the uploaded source image is preserved.

1 Like

I was going to say the same, I think the OP is heavily compressing the images on save, before uploading.
Note @PaulOB uploaded PNGs which are lossless so the image quality is perfect.

Here is my gradient as Jpeg with low compression. 27.1KB

Now Jpeg with high compression. 24.2KB

And as PNG. Only 4KB with no degradation in quality.

#WhyTheRightImageFormatIsImportant

Speaking of which… Do you know of SVG?

Not much at all. I’ve seen you do some fascinating things with .svgs, so my appetite is stoked. Just need the time and ability to stay focussed. Do you have any favorite or recommended sources for learning about them?

Yes Its because the 45 degrees I suggested can be created by just offsetting 1 pixel at a time to achieve the angle whereas other angles may need a 2 or 3 pixel offset to acheive the desired angle. This makes the jagged edge more obvious.

Here is a zoomed example.

A pixel is effectively the smallest point on your monitor and the straightest diagonal line you can get is at 45 degrees because there is just a 1px distance between points. Some browsers may anti alias these pixels where there is more than a pixel difference required to make the line and thus give the impression of a smoother line.

This is why modern devices may use double density/ retina (or greater displays) to allow for better quality images.

4 Likes

It can be seen in all the images which are not the home page. Enter to any page in the site and you could see the gradient. Sorry for not mentioning. I just woke up and I can’t edit the link now.

I’ve learned much from that Answer Paul, thanks !

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.