Smooth serration in the gradient

Asked

Viewed 643 times

3

I’m using gradient in CSS, but it gets a serration, it has some way to soften via CSS?

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

css

  • In Chrome is more visible the serration, in firefox the view is a little better.

2 answers

1


The way the saw will exist 50%/50% the gradient is not applied because there is no transition, but if the difference is 0.05%, 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>

  • Good output, but serration would not exist if the browser decided to use more color depth. This done in Photoshop does not give serration.

  • Cool for this case solves the problem, but I’m making a timer that fills the degrade according to the position, I can not use images,is all via css, in other cases did not happen to make this change.

1

First, I suggest changing the code to...

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

...without -image. But I imagine that’s not the cause. Browsers traditionally save colors to gain performance and adapt the reality of each system they run on. It’s already improved a lot compared to the early days with 256 colors, but a complex gradient will only work well even with a GPU acceleration, and there’s no way to control it.

What I’ve seen people do is exchange the real-time rendered gradient for an equivalent background image.

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

The images are better rendered and the end result is better. That’s it, maybe a CSS4 comes with some rendering quality parameter, for now only the same hack!

  • Images generate a better result even, but in my case I can not is a timer that will fill according to percentage, need to be a solution in css even, worth.

Browser other questions tagged css

You are not signed in. Login or sign up in order to post.