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…

Like this post? Got a question?

Reply via: Email, Bluesky, Mastodon, Twitter