What is the syntax to use text and box CSS shadows?

The syntax to use a text shadow is:

CSS Shadows - Naukri Code 360

Q: What are CSS shadows?

CSS shadows are styling elements used to add a 3-D effect to either a text or a box.

Q: How many types of CSS shadows are there?

There are two types of CSS shadows:Text shadowsBox shadows

Q: 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.

Introduction

Hello Ninja, welcome to the new article of CSS 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:

Text Shadow
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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Coding Ninja</h1>
    </div>
    <div class="second">
        <h1>Coding Ninja</h1>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.second{
    margin-left: 50px;
    text-shadow: 2px 2px;
}

Output

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

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Coding Ninja</h1>
    </div>
    <div class="second">
        <h1>Coding Ninja</h1>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.second{
    margin-left: 50px;
    text-shadow: 2px 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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Coding Ninja</h1>
    </div>
    <div class="second">
        <h1>Coding Ninja</h1>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.second{
    margin-left: 50px;
    text-shadow: 2px 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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Coding Ninja</h1>
    </div>
    <div class="second">
        <h1>Coding Ninja</h1>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.second{
    margin-left: 50px;
    text-shadow: 1px 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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Coding Ninja</h1>
    </div>
    <div class="second">
        <h1>Coding Ninja</h1>
    </div>


  </body>
</html>

CSS

body{
    display: flex;
}
.second{
    margin-left: 50px;
    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

Parts of the box-shadow property

There are four box-shadow numbers to choose from:

offset-x: The horizontal shift of the shadow of the element. Positive values shift the shadow to the right, while negative values move it to the left.

offset-y: The perpendicular displacement of the shadow of the element. Positive values make the image smaller, while negative values make it larger.

blur-radius: The amount of blur that is used to produce the shadow. Higher values result in a softer, more dispersed shadow.

color: The tone of the shadow. This can be specified using keywords (for example, black, white), hexadecimal values (for example, #000000, #fffff), RGB or RGBA values (for example, rgb(0,0,0), rgba(255,255,255,0.5)), or HSL or HSLA values (for example, hsl(0,0%,0%), hsla(0,0%,100%)).

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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Without Shadow</h1>
    </div>
    <div class="second">
        <h1>With Shadow</h1>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.first{
    height: 250px;
    width: 250px;
    background-color: orange;
}
.second{
    margin-left: 50px;
    height: 250px;
    width: 250px;
    background-color: orange;
    box-shadow: 10px 10px;


}

Coloured and Blurred Shadows

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

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Without Shadow</h1>
    </div>
    <div class="second">
        <h1>With Shadow</h1>
        <h2>Blur</h2>
    </div>
  </body>
</html>

CSS

body{
    display: flex;
}
.first{
    height: 250px;
    width: 250px;
    background-color: orange;
}
.second{
    margin-left: 50px;
    height: 250px;
    width: 250px;
    background-color: orange;
    box-shadow: rgba(50, 50, 93, 0.25) 0px 30px 114px 4px inset, rgba(10, 0, 0, 6.3) 11px 48px 42px 4px inset;
}

}

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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <div class="first">
        <h1>Without Shadow</h1>

    </div>
    <div class="second">
        <h1>With Shadow</h1>
        <h2>Spread Radius = 5px</h2>
    </div>


  </body>
</html>

CSS

body{
    display: flex;
}
.first{
    height: 250px;
    width: 250px;
    background-color: orange;
}
.second{
    margin-left: 50px;
    height: 250px;
    width: 250px;
    background-color: orange;
    box-shadow: 10px 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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Coding Ninja</title>
   <link rel="stylesheet" href="style.css">
 
</head>
<body>
 
   <div class="first">
       <h1>Without Shadow</h1>
   </div>
   <div class="second">
       <h1>With Shadow</h1>
       <h2>Border Radius = 5px</h2>
   </div>
 </body>
</html>

CSS

body{
    display: flex;
}
.first{
    height: 250px;
    width: 250px;
    background-color: orange;
}
.second{
    margin-left: 50px;
    height: 250px;
    width: 250px;
    background-color: orange;
    box-shadow: 10px 10px 5px 5px grey;
    border-radius: 5px;
}

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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Coding Ninja</title>
   <link rel="stylesheet" href="style.css">
 
</head>
<body>
 
   <div class="first">
       <h1>Without Shadow</h1>
   </div>
   <div class="second">
       <h1>With Shadow</h1>
       <h2>Inset Keyword</h2>
   </div>
 </body>
</html>

CSS

body{
    display: flex;
}
.first{
    height: 250px;
    width: 250px;
    background-color: orange;
}
.second{
    margin-left: 50px;
    height: 250px;
    width: 250px;
    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.

Html

<!DOCTYPE html>
<html lang="en">
<head>
   <meta charset="UTF-8">
   <meta http-equiv="X-UA-Compatible" content="IE=edge">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Coding Ninja</title>
   <link rel="stylesheet" href="style.css">
 
</head>
<body>
 
   <div class="first">
       <h1>Without Shadow</h1>
   </div>
   <div class="second">
       <h1>With Shadow</h1>
       <h2>Multiple Shadows</h2>
   </div>

 </body>
</html>

CSS

body{
   display: flex;
}
.first{
   height: 250px;
   width: 250px;
   background-color: orange;
}
.second{
   margin-left: 50px;
   height: 250px;
   width: 250px;
   background-color: orange;
   box-shadow: 5px 5px 20px 5px darkslateblue, -5px -5px 20px 5px dodgerblue, inset 0px 0px 10px 2px darkslategray, inset 0px 0px 20px 10px rgb(191, 76, 27);
}

Output

Cards

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

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Coding Ninja</title>
    <link rel="stylesheet" href="style.css">
   
</head>
<body>
   
    <img class="pic" src="codingNinja.png" alt="Logo" width="600" height="400">


  </body>
</html>

CSS

body{
    display: flex;
}
img{
    margin: 20px;
    box-shadow: 0 5px 10px 0 rgba(0, 0, 0, 0.4),
          0 7px 22px 0 rgba(0, 0, 0, 0.2);
}

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.

Best Shadow for Box

Below is the shadow picture with the shadow value you may use for your development.

To implement it use only box-shadow property in CSS as below.

Frequently Asked Questions

What are CSS shadows?

CSS shadows are styling elements that add a 3-D effect to a text or a box.

How many types of CSS shadows are there?

There are two types of CSS shadows:Text shadows and Box shadows.

What is a CSS text shadow?

The text-shadow CSS property adds shadows to text.

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.

Can I apply multiple shadows to an element?

You can apply multiple shadows to an element by separating each definition with a comma.

Conclusion

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!


box-shadow: rgba(51, 52, 94, 0.26) 2px 30px 61px -13px, rgba(0, 1, 0, 0.3) 0px 14px 32px -19px;	box-shadow: rgb(33, 51, 74) 1px 30px 32px -11px;	box-shadow: rgba(1, 0, 0, 0.07) 2px 1px 1px, rgba(2, 0, 0, 0.07) 0px 3px 2px, rgba(0, 0, 0, 0.09) 0px 5px 5px, rgba(0, 0, 0, 0.08) 0px 6px 7px, rgba(1, 0, 0, 0.07) 0px 15px 16px;

box-shadow: rgb(205, 218, 236) 4px 4px 7px 1px inset, rgba(255, 255, 255, 0.5) -4px -3px 7px 2px inset;	box-shadow: rgba(0, 0, 0, 0.16) 0px 16px 26px, rgba(0, 0, 0, 0.06) 0px 6px 9px;	box-shadow: rgba(0, 0, 0, 0.19) 0px 2px 5px;