Skip to main content

How to Decorate Text With Shadow Effects Using CSS

You may already learned about ghost button and zoom effect on this blog. In this post, you will learn how to decorate text, paragraph and links with shadow effects. It is very simple to decorate text, paragraph and links with/without shadow effects. If you have a little bit knowledge of HTML/CSS, you can do more. To do so you need to remember some codes or just copy the others code and try yourself by changing the values.Read also : How to protect your computer from WannaCry ransomware virus.

To decorate text with shadow effects, you need to apply CSS property with style attributes. The CSS text-shadow property used to apply shadow to text/paragraph and color property used to apply color to text/paragraph. Also box-shadow property is used to apply to elements and is only used to apply horizontal and vertical shadow for a division. You can decorate text with shadow effects in different ways.

Inline - Inline CSS is used to apply unique style to a single HTML element by using style attributes.

Internal - Internal CSS is used to apply unique style to a single page by using a <style> element in the <head> section.

External - External CSS is used to apply unique style to multiple pages using external style sheet. Users need to create an external style sheet and then need to link the style sheet in the <head> section. Popularly this is used in blogging platform like Blogger/WordPress etc. Read also : How to put adsense ad below blogger post.

Decorating Texts Using Inline CSS

For decorating text with shadow effects you use <h1> to <h6> tag and tag must be closed with end tag like </h1> to </h6> tag. Below are the examples of Inline CSS style.

Example 1

<h1 style="color: blue; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 2

<h1 style="color: red; text-decoration: none; text-shadow: 0 2px #0000FF, 0 2px #00FF00;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 3

<h1 style="color: blue; text-decoration: overline; text-shadow: 2px 2px 2px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 4

<h1 style="color: red; text-decoration: underline; text-shadow: 2px 5px 5px;"> All Blogger Buzz </h1>

Demo :   

All Blogger Buzz


Example 5

<h1 style="color: blue; text-decoration: line-through; text-shadow: 0 5px 5px;"> All Blogger Buzz </h1> Read also : How to make money online from home.
Demo :   

All Blogger Buzz


Example 6 : Blur Effects

<h1 style="color: blue; text-decoration: none; text-shadow: 0 0 2px #0000FF, 0 0 2px #FF0000;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 7 : Multiple Shadows

<h1 style="color: white; text-decoration: none; text-shadow: 2px 3px 4px blue , 0 0 20px red , 0 0 15px green;"> All Blogger Buzz </h1>

Demo :    

All Blogger Buzz


Example 8 : 

<h1 style="color: yellow; text-decoration: none; text-shadow: -2px 0 black, 0 1px red, 1px 0 red, 0 -1px blue;"> All Blogger Buzz </h1>

Demo :  

All Blogger Buzz


Decorating Links Using Inline CSS

You can use anchor <a> ..... </a> tag with different style attributes.

<a href="type-link-URL" style="color: blue; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px;">How To Make Money Online From Home </a> Read also : How to setup AdSense ad below blog post.

Example :    How To Make Money Online From Home

Decorating Paragraph Using Inline CSS


To decorate block of text/paragraph you just need to add <div> ...... </div> tag with different style attributes. Use below codes to decorate block of text/paragraph.

<div style="color: green; text-decoration: none; text-shadow: rgb(170, 171, 171) 2px 2px; background-color: yellow; box-shadow: -5px -5px 20px 20px;" > Type your paragraph here </div>

You can decorate any text with shadow effects according to your choice by changing the property and value of color, tex-decoration, text-shadow, box-shadow etc. in the above code as per your choice. Read also : How to create AdSense for search and make money from it.

Decorating Text Using Internal CSS

Most of the blogging platform uses Internal CSS style sheet. If you are using internal CSS style sheet then no need to upload separate style sheet file to your server. Internal CSS style sheet is used to apply unique style to a single page by using a <style> element in the <head> section.

<!DOCTYPE html>
<html>
<head>
<style>
h1 {
   color: yellow;
   font-family: tahoms;
   font-size: 250%;
   text-decoration: none;
   text-shadow: -2px 0 blue, 0 1px black, 1px 0 black, 0 -1px black;;
}
p  {
   color: green;
   word-wrap: break-word;
   font-family: courier;
   font-size: 150%;
   padding: 30px;
}
a  {
   color: red;
   font-size: 250%;
   text-decoration: none;
   text-shadow: 0 2px #0000FF, 0 2px #00FF00;
}
div {
   color: red;
   text-align : justify;
   text-decoration: none;   
}

</style>
</head>
<body>
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
-------------------------------------------------------------------------------------
</body>
</html>


Decorating Text Using External CSS

If you do want to write the code repeatedly for different text/paragraphs for new blog post then it is better to use the CSS code inside your theme/template with External-block using <style> element in the <head> section.  External style sheet can be written in any text editor and the file not contain any HTML code and it is saved with .css extension. Here is how the CSS <style> attribute looks. Read also : How to remove password from PDF file.

h1 {
   color: yellow;
   font-family: tahoms;
   font-size: 250%;
   text-decoration: none;
   text-shadow: -2px 0 blue, 0 1px black, 1px 0 black, 0 -1px black;;
}
a  {
   color: red;
   font-size: 120%;
   text-decoration: none;
   text-shadow: 0 2px #0000FF, 0 2px #00FF00;
}
p  {
   color: green;
   word-wrap: break-word;
   font-family: courier;
   font-size: 150%;
   padding: 30px;
}
div {
   color: red;
   text-align : justify;
   text-decoration: none;   
}

After that save the file as style.css and use the below syntex to add this style sheet in your html page

<link href="style.css" rel="stylesheet" type="text/css" />

Thanks for reading this post. Subscribe to our news letter and give your few second to share this post on social networks.


Comments