DEV Community

Cover image for Box shadow vs. drop shadow in CSS

Box shadow vs. drop shadow in CSS

Shuvo on December 04, 2021

We all know that we can use box-shadow to add shadows to our HTML elements. eg .box{ box-shadow: 2px 3px 10px rgba(0, 0, 0, .5); } ...
Collapse
 
boyney profile image
Boyne

I didn’t even know drop shadows existed until now

Collapse
 
0shuvo0 profile image
Shuvo

Hope you have a lot of fun with it

Collapse
 
andrewbaisden profile image
Andrew Baisden

Nicely explained.

Collapse
 
0shuvo0 profile image
Shuvo

Many many Thanks 💖

Collapse
 
calinzbaenen profile image
Calin Baenen

If I recall correctly, being rectangle/conforming to visible shape also applies to text, and other things with possible transparency, doesn't it?

Collapse
 
0shuvo0 profile image
Shuvo

Yes
You cab use text-shadow instead of box-shadow for texts btw

Collapse
 
astrojets profile image
astro-jets

Nice and easy 👌

Collapse
 
0shuvo0 profile image
Shuvo

Thanks 💓

Collapse
 
adedking profile image
adedking

Thanks for this. Really needed

Collapse
 
0shuvo0 profile image
Shuvo

You're most welcome

Collapse
 
imiahazel profile image
Imia Hazel

Thanks for the new concept. You have explained this elegantly. I have learned something new and achieved my daily goal happily. :)

Collapse
 
0shuvo0 profile image
Shuvo

I am glad I could help <3

Collapse
 
chema profile image
José María CL

omg!

Collapse
 
sintoparava profile image
Sinto PV

Great

Collapse
 
bpsagar profile image
Sagar Chakravarthy

TIL 🙏

Collapse
 
marwankous profile image
marwankous

it's Very useful, thanks

Collapse
 
0shuvo0 profile image
Shuvo

Glad you liked it

Collapse
 
code_rabbi profile image
Emeka Orji

Amazing discovery! Thanks

Collapse
 
hobart2967 profile image
Marco Klein

Have you got information about the performance of both solutions?

Collapse
 
madrafj profile image
Ahmad Rafsanjani

Nice info.. many many thanks for sharing

Collapse
 
0shuvo0 profile image
Shuvo

glad you liked it