Skip to content

DEV Community

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); } ...

Read full post

Boyne • Dec 4 '21

I didn’t even know drop shadows existed until now

Shuvo • Dec 4 '21

Hope you have a lot of fun with it

Andrew Baisden • Dec 4 '21

Nicely explained.

Shuvo • Dec 4 '21

Many many Thanks 💖

Calin Baenen • Dec 4 '21

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

Shuvo • Dec 5 '21

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

José María CL • Dec 6 '21

omg!

Sinto PV • Dec 6 '21

Great

Sagar Chakravarthy • Dec 6 '21

TIL 🙏

Emeka Orji • Dec 6 '21

Amazing discovery! Thanks

Marouane K • Dec 5 '21

it's Very useful, thanks

Shuvo • Dec 6 '21

Glad you liked it

astro-jets • Dec 5 '21

Nice and easy 👌

Shuvo • Dec 6 '21

Thanks 💓

adedking • Dec 5 '21

Thanks for this. Really needed

Shuvo • Dec 6 '21

You're most welcome

Imia Hazel • Dec 6 '21

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

Shuvo • Dec 7 '21

I am glad I could help <3

Ahmad Rafsanjani • Dec 5 '21

Nice info.. many many thanks for sharing

Shuvo • Dec 5 '21

glad you liked it

Marco Klein • Dec 7 '21

Have you got information about the performance of both solutions?