Soften the serrated in the gradient

3

I'm using gradient in CSS, but does it get a serrated, is there any way to smooth via CSS?

p {
  background-image: linear-gradient(161.2deg, green 50%, white 50%, white);
}
<p>Gradiente</p>
    
asked by anonymous 09.11.2016 / 14:48

2 answers

1

In this way the serialization will exist because% of% /% with% is not applied to the gradient, since there is no transition, but if the difference is 50% , it already improves the result, because a little gradient will be applied.

Look how it would look:

p {
  background-image: linear-gradient(161.2deg, green 49.5%, white 50%, white);
}
<p>Gradiente</p>
    
09.11.2016 / 17:03
1

First, I suggest changing the code to ...

p {
  background: linear-gradient(161.2deg, green 50%, white 50%, white);
}

... without the -image. But I guess that's not the cause. Traditionally, browsers save color to gain performance and adapt to the reality of each system where they run. It has already improved a lot over the early days with 256 colors, but a complex gradient will only work well even with GPU acceleration, and there is no way to control it.

What I've seen people do is to exchange the rendered rendering in real time for an equivalent background image.

p {
background: url('degradeperfeito.png');
}

Images are better rendered and the end result is better. For this, maybe a CSS4 comes with some quality rendering parameter, for now just the hack itself!

    
09.11.2016 / 17:40