🚨 Get Your Free NFT Certificate Mint by Completing the Web3 Exam! START NOW

Code has been added to clipboard!

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

Reading time 3 min
Published Nov 20, 2016
Updated Jan 21, 2020

TL;DR — CSS offers two separate properties for adding shadows to text and other elements such as images: text-shadow and box-shadow.

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

This is an element with box shadow
Example

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:

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

The next option is creating a CSS image shadow:

Example
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:

Example
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:

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

DataCamp
Pros
  • Easy to use with a learn-by-doing approach
  • Offers quality content
  • Gamified in-browser coding experience
  • The price matches the quality
  • Suitable for learners ranging from beginner to advanced
Main Features
  • Free certificates of completion
  • Focused on data science skills
  • Flexible learning timetable
Udacity
Pros
  • Simplistic design (no unnecessary information)
  • High-quality courses (even the free ones)
  • Variety of features
Main Features
  • Nanodegree programs
  • Suitable for enterprises
  • Paid Certificates of completion
Udemy
Pros
  • Easy to navigate
  • No technical issues
  • Seems to care about its users
Main Features
  • Huge variety of courses
  • 30-day refund policy
  • Free certificates of completion

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

Example

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

Example

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

Example
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.