Avoiding jagged edges on CSS linear gradients
TL;DR Prevent a jagged edge when using percentages on linear gradients by using calc to add a 1px blur.
background: linear-gradient(176deg, white, white 75%, black calc(75% + 1px), black 100%);
Avoiding jagged edges on gradients
A really common design pattern I see come up a lot are those angled blocks of colour in the bottom of containers, you’ve probably come across it, it looks something like the image below. This…
![](https://miro.medium.com/max/1108/1*2cMIvXVQoxLaxAVvQ0D42w.png)
Like this post? Got a question?
Reply via: Email, Bluesky, Mastodon, Twitter