DEV Community

Cover image for The master guide to smooth, realistic shadows in CSS
Devang Saklani
Devang Saklani

Posted on • Edited on

The master guide to smooth, realistic shadows in CSS

In this article you will get to know about smooth CSS Shadows and a easy way to use them. But first of all

What are shadows?
When light falls upon an object shadow is formed. The shadows we see around us works on the same principle but they are really complex and realistic as they are not in a specific shape or length or size. They can take any shape and can fall in any direction. In order to create shadows in websites using CSS we use box-shadow property.

for ex. box-shadow: 0 10px 10px rgba(0, 0, 0, 0.1);
Alt Text

But if you are trying to create real shadows through box-shadow property, well, You can't.

Why?
In order to know 'Why?' you have to understand how box-shadow property works.
box-shadow property simply produces a blurred silhouette of an object. You can change its length, color, blur, spread and offset nothing more. Then there's probably no way to create the Natural Super complex real Shadows through box-shadow property.

But unexpectedly there's a way!
If we will use a simple technique, we will be able to get more controls and expand our range of options. This technique is using 'layered shadows'. We can define multiple shadows in a simple box-shadow property by using commas and gradually increasing the blur-radius, offset to make shadows more realistic. Here's an example:

Normal box-shadow
Alt Text

Layered box-shadow
Alt Text

As you can see the difference in shadows. You can customize it more to generate more variants of shadows i.e. Sharp shadows, Dreamy shadows, long shadows etc.


/* Normal box-shadow */
.box {
    box-shadow: 0 3px 3px rgba(0,0,0,0.2);
}

/* Layered Box-shadow */
box-shadow:
     0 3.9px 4.6px rgba(0, 0, 0, 0.08),
     0 12.3px 8.4px rgba(0, 0, 0, 0.056),
     0 18.8px 19.2px rgba(0, 0, 0, 0.037),
     0 22px 40px rgba(0, 0, 0, 0.019)
;

Enter fullscreen mode Exit fullscreen mode

More Layers == More Customization == More Realistic shadows

You can also generate Sharp shadows by gradually decreasing the alpha values (opacity) and increasing the blur strength to create Sharp shadows. You can use the same principle to create Diffused shadows.

Sharp shadow⏬
Alt Text

Diffused shadow⏬
Alt Text

We can also create Short as well as long shadows by just playing with opacity and spread. To create long shadows we can gradually increase the y-offset values.

Short shadow⏬
Alt Text

Long shadow⏬
Alt Text

However creating these kind of shadows is a real mess for some people, specifically for those people and for making our life more easy there is website which can help them in Creating realistic shadows i.e. https://shadows.brumm.af/ by Philipp.

Alt Text

Through this website you can create as many layers as you want and edit them in real time, Saving a lot of time and efforts.

A post by Devang. Hope it helps!
Check out my portfolio: here

Top comments (13)

Collapse
 
jackkeller profile image
Jack Keller

I was trying to figure out how to do a dumbed-down mixin for layered drop-shadows a while back, I'd love to see how you put together the generator if you're willing to share. I get it if not, a lot of calculations going on there.

Thanks for sharing with the community, lovely generator you've built!

Collapse
 
devang profile image
Devang Saklani

You're welcome. And about the generator it isn't made by me😅 it is built by brumm.af/
I forgot to give him credits.

Collapse
 
afif profile image
Temani Afif

can you please remove the JS tag since your post is only related to CSS?

Collapse
 
devang profile image
Devang Saklani • Edited

Done! and Sorry i did that for getting more views😅

Collapse
 
afif profile image
Temani Afif

doing that may get you the opposite effect because someone following the JS tag may not be intrested in CSS posts. You have more tags you can use that are more relevant than JS

Thread Thread
 
devang profile image
Devang Saklani

Oh I didn't knew that thanks for your Feedback😊

Collapse
 
ryanneil profile image
Ryan Neil

Nice read! Thanks for sharing🤙🏻

Collapse
 
nikhilmwarrier profile image
nikhilmwarrier

Exactly what I needed! Thanks!

Collapse
 
anirudh711 profile image
Anirudh Madhavan

I have also found this:
https://neumorphism.io/

Collapse
 
itsmnthn profile image
Manthankumar Satani

Great peice of article

Collapse
 
luke_codes profile image
Luke Poirrier

Very cool tool, thanks for the helpful info!

Collapse
 
imiahazel profile image
Imia Hazel

I am a tremendous fan of Layered box shadows. This approach allows me to create masterworks by combining multiple shades. Thanks for providing outstanding new ideas in your realistic shadows guide.

Some comments may only be visible to logged-in visitors. Sign in to view all comments.