CSS Text Shadow Example

Here’s a simple way of adding an HTML CSS text shadow with a 3D effect look using multiple CSS text shadows.

Final Output:

1. Add your heading tag or any text.

<h2>Subscribe</h2>

Output:

2. Add some styling to the heading.

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  color: cornflowerblue;
}

Output:

3. Add a text shadow.

h2 {
  text-shadow: 6px 6px peachpuff;
}

Output:

4. Now, to add some more depth, we’ll add multiple text shadows. This will give it a 3D look to it.

h2 {
    text-shadow: 
    6px 6px peachpuff, 
    5px 5px peachpuff, 
    4px 4px peachpuff,
    3px 3px peachpuff, 
    2px 2px peachpuff, 
    1px 1px peachpuff;
}

Output:

5. You can change the shadow position using negative horizontal and vertical offset values:

h2 {
  text-shadow: -6px 6px peachpuff, -5px 5px peachpuff, -4px 4px peachpuff,
    -3px 3px peachpuff, -2px 2px peachpuff, -1px 1px peachpuff;
}

h2 {
  text-shadow: -6px -6px peachpuff, -5px -5px peachpuff, -4px -4px peachpuff,
    -3px -3px peachpuff, -2px -2px peachpuff, -1px -1px peachpuff;
}

h2 {
  text-shadow: 6px -6px peachpuff, 5px -5px peachpuff, 4px -4px peachpuff,
    3px -3px peachpuff, 2px -2px peachpuff, 1px -1px peachpuff;
}

6. Set the horizontal offset to 0 to make the shadow appear only at the bottom.

h2 {
  text-shadow: 0 6px peachpuff, 0 5px peachpuff, 0 4px peachpuff,
    0 3px peachpuff, 0 2px peachpuff, 0 1px peachpuff;
}

Similarly, top place it at the top, set v-offset to 0. You can also use negative values.

Final Output Code for Text Shadow HTML CSS:

HTML:

<h2>Subscribe</h2>

CSS:

h2 {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 3em;
  color: cornflowerblue;
  text-shadow: 0 6px peachpuff, 0 5px peachpuff, 0 4px peachpuff,
    0 3px peachpuff, 0 2px peachpuff, 0 1px peachpuff;
}