Navigate back to the homepage
★ VN

Easing Gradients

Smoothen gradients overlay

Trong Nguyen
April 25th, 2021

First, let’s take a look at those 2 photos from 500px and Unsplash. They have the same idea when hovering over an image, it shows overlay additional info. Tell me which one gives you more aesthetic pleasure?

trongnguyen easing gradient 1

Of course, the Unsplash one is much better. But why?

500px uses a linear gradient for the overlay background. Linear gradients often have hard edges where they start and/or end. When transitioning between colors the edges become prominent if we don’t ease-in-out of it.

We can avoid those by controlling the color mix. The examples below have the same amount of blackness behind the text.

trongnguyen easing gradient 2

To archive that effect on our design, we will have to pick color manually. It will be very painful. But with help from plugins like Easing Gradients for Figma, our life will be easier.

Hi, I'm Trong, product designer living in Singapore. I write to practice, and write to find ideas. Nice to meet you!
View all writing →

Sign up to my email list for updates

Be the first to receive my latest updates. No spam or share your email with any third parties.

More from Trong Nguyen

Finally, my design sees the light

As designers, we always face the truth that our design might never see the light. Even the time we spent on that design is huge.

March 6th, 2021 · 1 min read

2020 year in review

2020 is the year none would forget. It was supposed to be a good year with a beautiful number. But what happened was terrible. Today is the time to reflect on the past year.

January 1st, 2021 · 5 min read
© 2018–2021 Trong Nguyen:
Link to $ to $ to $