DEV Community

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

The master guide to smooth, realistic shadows in CSS

Devang Saklani on June 22, 2021

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...
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.