Box-shadow vs Text-shadow in CSS
Hello, I know that both text and box shadows produce some kind of "shadow" effects but is there a difference between the 2? For example when would we need to prioritize box shadow over text-shadow or vice-versa please.
3 Replies
These videos illustrate box-shadow, filter: drop-shadow(), and text-shadow
https://youtu.be/8Z9zimqUCzA?si=3SDdPQlqoF6QN7nX
https://youtube.com/shorts/wcLPloA1dSs?si=0aLkFJf_sJaAIKk1
Kevin Powell
YouTube
Why are there two ways to make shadows in CSS? box-shadow vs filter...
There are a few different ways to create shadows in CSS, so in this video, I look at the difference between two of them: box-shadow and filter: drop-shadow().
The other filter properties: https://developer.mozilla.org/en-US/docs/Web/CSS/filter
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
---
Kee...
Kevin Powell
YouTube
Fun text-shadow effect with CSS | CSS Tip of the Day | #shorts
Code: https://codepen.io/kevinpowell/pen/eYmNmNW
#css
--
Come hang out with other dev's in my Discord Community
💬 https://discord.gg/nTYCvrK
Keep up to date with everything I'm up to
✉ https://www.kevinpowell.co/newsletter
Come hang out with me live every Monday on Twitch!
📺 https://www.twitch.tv/kevinpowellcss
---
Help support my...
Ok, will have a look, thanks !
From what I've understood, box-shadow is more about making the container itself has a shadow while drop-shadow() is making the content has a shadow.
One thing though, how does text-shadow differs from drop-shadow()? :c
one is for text, the other also works on transparent images