Andres GonzalezFlowglad · Designer by day, Batman by night

How to get buttery smooth shadows 🧈🦇#webdesign

1 Apr 2026 · 0 min

Watch on YouTube

0:27

Linear shadows look flat. Use Framer's realistic shadow effect with 12% opacity, 8px left shift, 0.45 diffusion, and 0.1 focus to get buttery smooth shadows that actually look like light hitting something.

But how do you go from this to this? And why do these shadows appear to be way more realistic? The first version uses a linear shadow layer that doesn't diffuse very well. But shadows in real life are way more complex and multi-layered. And if we use Framer's built-in realistic shadow effect, tone down the opacity to 12%, angle the shadow by 8 pixels to the left, set diffusion to 0.45 and focus to 0.1, you'll get something that looks like this. Wow! Which is sick because I've always wondered