Box Shadow in CSS (Part-3)

This is the part-3 of box-shadow in CSS. In this blog we will see some awesome designing hacks related to box-shadow. To start with basic you can check Part-1 and Part-2.

So let's start :-

Text-shadow

Using text-shadow you can give shadow to your text. Most of the properties of text-shadow are similar to that of box-shadow except spread-radius, yes there is no spread-radius in text-shadow.

Syntax

text-shadow: X-offset Y-offset blur-radius color;

Remember :- In text-shadow we use smaller value of blur-radius as compared to box-shadow to make shadow look settle.

text-shadow: 5px 5px 2px rgba(0,0,0,1);

Using box-shadow on text

Yes we can apply box-shadow on text also. On applying box-shadow to text the shadow which which will be generated will be actually in the box-shape, it will form a box around and then shadow of that box will be generated.
So it is suggested to use text shadow instead.

box-shadow: 5px 5px 2px rgba(0,0,0,.5);

Using drop-shadow on text

We can also apply drop-shadow on text. Applying drop-shadow and text-shadow will give you a more similar and settle shadow.

Syntax

filter: drop-shadow(X-offset Y-offset blur-radius color);

filter: drop-shadow(5px 5px 2px rgba(0,0,0,1));

Let's learn more about drop-shadow

Drop-shadow is used most when we want to add shadow to a .png image we can also apply it to other image formats too but its effect can be understood more clearly by using it on a png file. When we apply drop-shadow to a png image whose background is transparent then the shadow will be formed only around the parts of image where there is content.

filter: drop-shadow(0px 0px 5px rgba(0,0,0,1));

Difference will be more clear by applying box-shadow to same image

When you apply box-shadow to an image then the shadow formed will be shadow of box-shape, that is you can't see detailing in this shadow.

box-shadow: 0px 0px 25px rgba(0,0,0,.5);

Note :- drop-shadow uses properties as text-shadow use. You can replace text-shadow with drop-shadow but on replacing drop-shadow with text-shadow it won't work as drop-shadow.

Let's see some box-shadow hacks

Border using box-shadow

You can create a border or multiple borders using box-shadow. To do so you have to use spread-radius. While giving it spread-radius keep in mind that when you are creating a single border then you have to give spread-radius the value of which size of border you want. And if you are creating multiple borders then the spread-radius of next shadow must be give value greater then that of previous.

For single border :-

box-shadow: 0px 0px 20px #fca311;

For multiple borders :-

box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;

Note :- To keep width of borders to be equal you have to increase the spread-radius in its multiples.
Okay hold, there is no rocket science in it, if the spread-radius for first border is 10px then for the second border multiply spread-radius of first border by 2 and similarly for third border multiply spread-radius of first by 3 and so on.

Adding border-radius to it

Yes you can add border-radius to the borders you created using box-shadow. To do so you have to add border-radius normally as you always add.

border-radius: 5%;
box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828;

Making complete element look hovering

You can make this whole element look hovering over the background, you just need to add one more shadow along with those three we added previously. In the new shadow we will increase the value of blur-radius to make it look hovering. But remember you have to keep its spread-radius at least equal to that of the previous one.

box-shadow: 0px 0px 15px #fcbf49,
            0px 0px 30px #f77f00,
            0px 0px 45px #d62828,
            0px 0px 50px 45px rgba(0,0,0,.5);

Creating steps effect

You can create a steps effect using box-shadow, all you have to do is, as you know spread-radius supports negative value, so give negative value to the spread-radius of all shadows and add horizontal offset to it. Remember while adding horizontal offset at least give it positive value higher than the spread-radius if you want steps below the element or give it negative higher value than spread-radius if you want steps above the element.

box-shadow: 
            0px 30px 0px -15px #fcbf49,
            0px 60px 0px -30px #f77f00,
            0px 90px 0px -45px #d62828;

My favorite application of box-shadow is Neumorphism I haven't covered neumorphism in these 3 blogs to keep them short. Very soon I will be writing about Neumorphism. Until then you can check my pens at CodePen here I have some awesome work done with box-shadow and Neumorphism.

Thank you for reading, I hope you have also read the other two parts.

Please feel free to share your views and about some more cool things we can do with box-shadow.

Any feedback would be greatly appreciated.

Connect with me on Twitter or LinkedIn

Comments

[STEMInstructor]

Ritvik with the eneeerrgggyyy💕😍🔥🔥

[Shivansh Pratap]

Great Blog, It is helpful. 🙌

[Ritvik Dubey]

I'm glad you found it helpful. Thank You😊❤️

[David Dal Busco]

Haha the steps effect is pretty neat, well played Ritvik 👍

[Ritvik Dubey]

Haha Thank You😊

[Heet Vakharia]

Amazing article

[Ritvik Dubey]

Thank You Heet😊❤️

[Ritvik Dubey]

Thank you Shadow ❤️😇

[James Thomson]

Nice tips👌 I've used the shadow as a border method before, but never thought to stack them for multiple borders.

[Ritvik Dubey]

I'm glad you found it helpful 😇❤️Yes there are many other things you can try with shadows😁