CSS box-shadow

While spending occassional weekends on building frontend projects. Everytime I start building the UI among all other things I visit W3Schools or MDN, I definitely refer box-shadow. So I thought of sharing what I learnt recently.

First the Basics

Syntax

box-shadow: inset(opt) x-offset(req) y-offset(req) blur-radius(opt) spread-radius(opt) color(opt);

Definitions are already available in MDN so I am not repeating here, & infact MDN/W3S are best for web dev references, I cant do any better.

Use Case 1:

In this example I am only using blur radius parameter. Use blur-radius to create a blur effect, but if you want a solid shadow use spread-radius instead (use case 2).

.shadow-1{
    box-shadow: 0 0 10px;
}

Use Case 2:

In this example I am going to use only spread radius. Use spread radius only, creates a outline like effect around the container. Ofcourse we can use outline instead, but this is an alternative to outline.

.shadow-4{
    box-shadow: 0 0 0 4px rgb(64,74,87);
}

Pro Tip: You can ignore the rgb color above .shadow-4 class and system will use the font color to create the shadow. This applies to all cases.

Use Case 3:

I guess we can now shift our focus to the first 2 parameters x-offset & y-offset.

.shadow-5{
    box-shadow: 4px 0;
}

As you can see we only get a shadow on the x-axis we only added a positive x-offset value of 4px. Even though y-offset is 0 we still have to write as it is a required parameter.

Now lets try y-offset only & as expected-

.shadow-5{
    box-shadow: 0 4px;
}

Lets try x & y offset together-

.shadow-5{
    box-shadow: 4px 4px;
}

Use Case 4:

By now I hope the 4 parameters(x,y,blur,spread) make some sense when we using individually. Now lets combine everything together and see what we get.

A few more basics to go...

Use Case 5:

Another interesting usage of box-shadow is to create multiple layers. We can display multiple layers of shadows using comma separated list of box shadow values.

.shadow-8{
    box-shadow: 0 0 0 14px rgb(64,74,87),
                0 0 0 28px rgb(56, 250, 82),
                0 0 0 42px rgb(56, 179, 250);
}

Use case 6:

The next property is the usage of inset keyword. Until now we have noticed usage of box-shadow for generating shadow outside the target element. Using inset keyword we can alter the direction of the shadow inward.

.shadow-9{
    box-shadow: inset 0 0 10px 10px rgba(0, 0, 0, 0.5);  
}

Blur vs Spread

When I was implementing box-shadow I really got confused between blur and spread radius. From use case 1 & 2 you can see that using spread radius generates a solid structure where as blur radius creates a blur.

You can use blur or spread separately or use them together.

.shadow-10{
    box-shadow: 0 0 4px 4px ;
}

Thats all for now. The quest for knowledge must never end. Keep learning ✌

Banner image by Céline Martin from Pixabay