Guide on Adding CSS Shadow Effect to Text Content and Other Elements

Adding Shadows to Elements

You can add CSS shadow to the element box or the text inside it. A common practice is setting horizontal and vertical properties to indicate the shadow position.

box-shadow

To make CSS drop shadow to the element box, we use CSS box-shadow property. It makes inline and block type elements, such as <div> or <section>, drop a rectangular shadow according to the set values.

In the example, we add a shadow around the frame of <div>:

div {
 box-shadow: 5px 5px;
}

Note: you can make CSS drop shadow to almost any element.

It is also possible to add CSS inner shadow. It refers to shadows that are inside the element box instead of outside.

You set CSS inner shadows by including the inset value at the beginning of the box-shadow declaration:

div {
width: 150px;
height: 150px;
box-shadow: inset 0px 0px 20px black;
}

The next option is creating a CSS image shadow:

img {
  box-shadow: 0px 0px 20px black;
}

In the following example, we use inset for the CSS image shadow to place the shadow inside the image:

img {
box-shadow: inset 0px 0px 20px black;
}

Make Shadows Unique

You can blur, color, and add multiple CSS shadows.

Text shadow

In the example below, we add a blurred out black shadow to our HTML element:

div { 
 box-shadow: 5px 5px 10px black;
}

text-shadow

The text-shadow property is for adding a shadow to the text content. You can set the color, offset (the distance between text and the shadow), and the blur-radius.

In the example, we illustrate multiple types of text shadows:

Text shadow

h1 {
 text-shadow: 3px 4px;  	
}

Additional Styling Options

You can customize the way you make CSS drop shadows to the text. The shadow can be blurred, barely noticeable, or placed above the text.

The example below modifies the shadow:

Text shadow

h1 {
 text-shadow: 3px 3px 1px black;
}

Here are the explanations of several unique shadows in the example above:

text-shadow: 3px 3px 7px blue; is set to <h2> element. The shadow is blue and blurred.

text-shadow: 1px 1px blue; is set to <h3>. The blue shadow is very close to the characters and not blurry.

text-shadow: 3px 3px; is set to <h4>. The shadow is solid black and further away from the characters.

text-shadow: 0 0 3px #FF0000; is set to <h5>. The shadow is behind the letters. Since it is blurred out, we can see it surrounding the characters.

text-shadow: 6px 6px 4px black; is set to <h6>. The distant black shadow is visible, but the characters are not.

Multiple Shadows

You can make CSS drop multiple shadows by separating values for each shadow by commas.

In the example below, we add two shadows to <h1> and three shadows to <h2>:

Multiple text shadow

h1 {
 text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

CSS Shadow: Useful Tips

• The CSS shadow effects also work with selectors, such as ::first-letter.
• If the element has the border-radius property, the CSS shadow becomes rounded as well.