Navigate back to the homepage
Digital Garden

Easing Gradients

Trong Nguyen
April 25th, 2021

Smoothen gradients overlay

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

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

Spark joy to Carousellers with delightful animations

The role of animation in user engagement and business

December 20th, 2020 · 3 min read
© 2019–2022
Link to $ to $ to $