Text Shadows

The text-shadow property

The CSS text-shadow property adds a shadow to each letter of some text, creating unique and amazing effects to a header or title of a blog. However, these text shadows are very tedious to code, even for experienced coders. This is because the text-shadow property takes four different values per layer, and you can have many layers of the same text.

Check out some of these text shadows. Below the shadow header, you will see some code. This is the CSS code that creates the text shadow. Click the code block to select it and then copy and paste it into your project. Or you could just paste the style attribute right into your blog post. Here is an example demonstration.

You can easily create text shadows then save them in a database for your web development projects or just copy and paste them right into your WordPress posts and pages. LOGIN or SIGN UP HERE!

Hello Everyone

#hello{ color: #000000; font-size: 70px; font-family: Lucida Handwriting; text-shadow: -16px 1px 22px #0080FF, 1px 3px 5px #FFFFFF, 0px 0px 20px #E600FF; }

style=’color: #000000;font-size: 70px; font-family: Lucida Handwriting; text-shadow: -16px 1px 22px #0080FF, 1px 3px 5px #FFFFFF, 2px 0px 38px #E600FF’

Tourquoise Stroke

#example{ color: #000000; font-size: 84px; font-family: Elephant; text-shadow: 0px 0px 2px #00D5FF, 0px 0px 4px #00D5FF, -2px 0px 14px #00D5FF; }

style=’color: #000000;font-size: 84px; font-family: Elephant; text-shadow: 0px 0px 2px #00D5FF, 0px 0px 4px #00D5FF, -2px 0px 14px #00D5FF’

Red Shadow

#example{ color: #000000; font-size: 70px; font-family: Lucida Handwriting; text-shadow: -1px 0px 3px #FF0000, 1px 1px 5px #FFFFFF, 0px 0px 20px #FFFFFF; }

style=’color: #000000;font-size: 70px; font-family: Lucida Handwriting; text-shadow: -1px 0px 3px #FF0000, 1px 1px 5px #FFFFFF, 2px 0px 17px #FFFFFF’

Purple Shadow

#example{ color: #000000; font-size: 70px; font-family: castellar; text-shadow: 2px 0px 4px #FFFFFF, 0px 2px 9px #E3E3E3, 0px 0px 20px #F017FF; }

style=’color: #000000;font-size: 70px; font-family: castellar; text-shadow: 2px 0px 4px #FFFFFF, 0px 2px 9px #E3E3E3, 2px 0px 25px #F017FF
Green Shadow

#example{ color: #00FF3C; font-size: 98px; font-family: cooper std; text-shadow: -8px 12px 8px #0008FF, 0px 0px 0px #000000, 0px 0px 0px #000000; }

style=’color: #00FF3C;font-size: 98px; font-family: cooper std; text-shadow: -8px 12px 8px #0008FF, 0px 0px 0px #000000, 0px 0px 0px #000000′

White Shadow

#example{ color: #000000; font-size: 70px; font-family: Elephant; text-shadow: 0px -1px 3px #FFFFFF, 0px 0px 10px #E3E3E3, 0px 0px 20px #8285A8; }

style=’color: #000000;font-size: 70px; font-family: Elephant; text-shadow: 0px -1px 3px #FFFFFF, 0px 0px 10px #E3E3E3, 2px 0px 35px #8285A8