CSS Shadows

Neelakshi Lahiri
Last Updated: May 13, 2022

Introduction

What is a shadow?

A sign of impending danger in horror movies or a friend that never leaves us. 

In CSS, a shadow is neither of them. It is a styling element used to add a 3-D effect to either a text or a box. 
 

A shadow has been added to the text in the pictures above, but we can also add shadows to a box or an image. This gives us two kinds of shadows:

  1. Text Shadow
  2. Box Shadow

 

Let’s learn what they are in this article.

Text Shadow

To begin with, let’s see the code for the example shown below above. 

CSS:

h1
{
    text-shadow2px 2px;
}

 

Here, a simple shadow of the same colour is added to the text by only a horizontal and vertical shadow. So the shadow isn’t prominent. Let’s change the colour of the shadow and see how it looks.

Coloured Shadow

CSS:

h1
{
    text-shadow2px 2px royalblue;
}

 

Output:

Blurred Shadow

We can also add a blur to the shadow, thus creating a glowing effect around the text. 

In the example below, a blur radius of 5px is added to the shadow. 

CSS:

h1
{
    text-shadow2px 2px 5px royalblue;
}

 

Output:

Multiple Shadows

As shown below, we can add more than one shadow to a text by adding a comma-separated list of shadows. 

CSS:

h1
{
    text-shadow1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}

 

Output:

 

Border Around Text

The last and exciting use of CSS shadows in texts is to add a border around them. To do that, we’ll add four shadows to the text - a negative and a positive horizontal and vertical shadow. 

This sounds confusing, doesn’t it?

Let’s see the code to get a better idea of it.

CSS:

h1
{
    color: white;
    text-shadow: -1px 0 black, 0 1px black, 1px 0 black, 0 -1px black;
}

 

Output:

With this, we finish learning about text shadows.

But hold on a second, wasn’t there another kind of shadow?

A box shadow!

Let’s learn what that is next.

Box Shadow

As the name suggests, a box shadow adds a shadow effect to a box, as shown below. 

 

But how do we use CSS shadows in a box?

Adding shadows to a text and a box aren’t much different. All we need to do is add a horizontal and vertical shadow.

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    box-shadow10px 10px;
}

 

Coloured and Blurred Shadows

Just like text shadows, we can add colour and a blur to the shadow around a box. 

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    box-shadow10px 10px 5px grey;
}

 

Output:

Spread Radius

An additional value exists for box shadows - spread radius. This value determines the size of the shadow. Let’s see an example of this. 

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    box-shadow10px 10px 5px 5px grey;
}

 

Output:

Border Radius

You probably already know that we can add a border radius to elements in CSS. The same can be done with box shadows, as shown below.

 

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    box-shadow10px 10px 5px 5px grey;
    border-radius5px;
}

 

Output:

Inset Keyword

The inset keyword can be added before the other properties to add an inner shadow instead of an outer shadow. The example shown below will help us understand the difference between an inner and outer shadow. 

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    Box-shadow: inset 10px 10px 5px 5px grey;
}












Output:

Multiple Shadows

As with text shadows, we can add multiple box shadows too. 

CSS:

div
{
    width100px;
    height100px;
    padding15px;
    background-color: orange;
    box-shadow5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue, inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px steelblue;
}

 

Output:

 

Cards

One final thing we’ll see before wrapping up is how to add paper-like cards using CSS. 

 

HTML:

<!DOCTYPE html>
<html>
<head>
    <title>My Page</title>
    <link href="style.css" rel="stylesheet">
</head>
<body>
    <div class="pic">
        <img src="Rose.jpeg" style="width: 100%;">
        <div class="text">
          <p>Red Rose</p>
        </div>
    </div>
</body>
</html>  

 

CSS:

.pic
{
    width250px;
    box-shadow0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
    text-align: center;
}

.text
{
    padding10px;
 

}


Output:

 

 

Here, a box is made around the image, and the text (in the “pic” class) and the box is styled accordingly to create a paper-like card. 

Frequently Asked Questions

  1. What are CSS shadows?
    CSS shadows are styling elements used to add a 3-D effect to either a text or a box.
     
  2. How many types of CSS shadows are there?
    There are two types of CSS shadows:
    Text shadows
    Box shadows
     
  3. What is a CSS text shadow?
    The text-shadow CSS property adds shadows to text.
     
  4. How do I put a background shadow in CSS?
    The box shadow property in CSS shadows can be used to put a background shadow in CSS.
     
  5. What is the syntax to use text and box CSS shadows?
    The syntax to use a text shadow is:
text-shadow: <horizontal shadow> <vertical shadow> <blur radius> <colour>

 

The syntax to use a box shadow is:

box-shadow: <horizontal shadow> <vertical shadow> <blur radius> <spread radius> <colour

 

Key Takeaways

In this article, we learnt what CSS shadows are and how to use them to add shadows to both boxes and texts, but only reading about CSS is no good. 

We should try writing some code ourselves and experiment with the different properties and their values. 

You may also read some other articles on CSS here.

Happy coding!

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think