February 13, 2017

CSS diagonal gradient line is pixelated, not smooth - workaround

The problem is described in this stackoverflow question. Basically, when you create a divided gradient, the now visible line has 1px "steps" on it. Here's what it looks like:


To fix that, decrease each previous stripe's width by 0.01%:

background:linear-gradient(135deg, red 49.99%, blue 50.00%)

No comments: