If you want to browse / duplicate the design or see the CodePen, check the bottom of the post
Our recent Instagram poll & DM’s regarding how developers feel with design highlighted something to us; most developers feel really uncomfortable with design.
With 93% agreeing, we think it would be a good time to help you all out with some beginner design tips, starting with some solid principles to better shadows.
The Purpose of Shadows in UI Design
Shadows are there to improve the overall general feel of things, and add levels of depth and realism to the user’s visual experience.
Because of this, shadows should
- Simulate real world light dynamics such as direct and ambient light
- Not be so prominent that they are a distraction. They should effectively blend in.
The following design definitely violates those two principles:
On that note, here are the 4 actionable tips for you to implement in any UI shadow design in your projects, and we'll show you how they add up each step of the way
1) Simulate Direct Light With A Hard (non-blurry) Shadow
Direct Light is light from one source shined directly on an object.
For example: When the sun is out, there will be a hard, defined shadow on the other side of every object. This is direct light casting the hard shadow we’re talking about
If we add direct light to our card, it would look like this:
2) Simulate Ambient Light With A Soft (blurry) Shadow
Ambient Light is light that bounces off all the surfaces around us.
For example: When the sun is hidden behind the clouds, you won’t see any direct light shadows, but if you look under trees, you might see a very soft, shaded area underneath them. This is because there is ambient light in the area, and this causes soft shadows.
If we add ambient light to our card, it would look like this:
3) Simulate Surface Shadows By Using A Similar Color To The Component Underneath
This is a bit of a trend at the moment, and it also gives another level of realism to your design - in the real world, things don’t just get “blacker” when a shadow is cast on them, they become a darker shade of the colour they already are.
So in that case, we colour-pick the background and make it a much darker and more saturated shade of the colour. Here’s how it looks:
It's a very subtle change by itself, but this in conjunction with all the other tips stack together to make for a great UI shadow.
4) Use Medium-Soft Inner Shadows On User Generated Images
User-generated images such as profile pictures or any other form of uploaded image will sometimes have colour that is similar to the background it’s on.
Here's a little comparison of how the profile picture looks with and without an inner shadow:
The Final Product
This looks much better than what we started with:
We Coded This Up
Here's the CodePen if you're interested - feel free to steal this and use it in any way you want (it looks much better if you press "Edit With CodePen" because it's not responsive):
Get The Design File
You can click here to be taken straight to Figma - feel free to duplicate it and make it your own. You don't need to attribute us, we can't afford lawyers anyway!
Curious about frontend development? We’ve just released a free crash course (No, it’s really free - no upgrades, no hidden costs)
We worked for a couple of months on a professional design and 4 hours 20 minutes of video content to bring you our free crash course showing you how to code this portfolio website (which we constantly encourage you to customise to your own style)
If that’s something that would interest you, and you’d like to learn more about HTML, CSS, SCSS, Bootstrap 4, Git, GitHub Pages and a sprinkle of JavaScript and jQuery, you can register today, for free, from this link here.
Top comments (8)
Inner shadow on the profile picture was a really nice touch!
Glad you thought so! It's also just super practical since user generated content always has the potential to blend in, so creating some form of boundary helps mitigate this.
The two-shadow-layer approach of combining a hard shadow for direct light with a soft one for ambient light has consistently held up across UI projects. Getting both layers right is what separates a component that feels genuinely grounded from one that just looks designed.
The colour-matched shadow tip is the one we find most consistently overlooked in practice. In our experience of reviewing a fair number of design files, most of the shadows were just rgba(0, 0, 0, 0.2) everywhere. Technically functional, but visually disconnected from the surface beneath. Once you start deriving the shadow colour from the background and adjusting its saturation, the whole composition feels grounded in a way that's hard to articulate but immediately noticeable.
One thing we would like to add from our experience is that these principles work well for light-mode interfaces, but dark UIs call for a different approach. In dark mode, drop shadows tend to lose their effect, and elevation often comes through better with subtle highlights or inner glows. It's something we had to consciously recalibrate when dark mode became a standard deliverable.
The inner shadow on profile pictures is an underrated call, simple to implement, and has an outsized visual impact.
That inner shadow does what I've always wanted to do, but didn't think to do with an inner shadow - thanks!
No problem Ryan, glad we found the solution for you! :D
This is super helpful! Thank you
Glad you found it helpful Garrett! Thanks for watching (or reading!?) :D
Thank you for giving a real world analogy, makes it very easy to understand. Looking forward to learn more.