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.
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.
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.
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:
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).
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:
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.
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.
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.
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.