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…
Mandy Michael
Like this post? Got a question?
Reply via: Email, Bluesky, Mastodon, Twitter