Css Tutorials

Text Shadow Description

The text-shadow property is supported in all major browsers, except Internet Explorer, Internet Explorer does not yet support the text-shadow property. Firefox, Chrome, Safari, and Opera support the text-shadow property, CSS level 3 has a property called ‘text-shadow’ to add a shadow to each letter of some text.

The property specifies one or more text shadow effects to be added to the text content of an element. text-shadow was originally specified in CSS2 but removed from CSS2.1 due to the lack of implementation among browsers. It’s currently also included in the CSS3 Text module.

Shadow effects are applied in the order in which they are specified. They don’t increase the size of a box, though they can extend past its boundaries, and their stack order is the same as the element itself. text-shadow is inherited in CSS3. Below is the syntax,

Text Shadow Syntax

text-shadow: h-shadow v-shadow blur color;

h-shadow: Required. The position of the horizontal shadow. Negative values are allowed
v-shadow: Required. The position of the vertical shadow. Negative values are allowed
blur: Optional. The blur distance
color: Optional. The color of the shadow. Look at CSS Color Values for a complete list of possible color values

Note: The text-shadow property attaches one or more shadows to text. The property is a comma-separated list of shadows, each specified by 2 or 3 length values and an optional color. Omitted lengths are 0.

Lets Start: Style 1

Html code for Style 1, Copy and Paste the below code in your body tag your html file:

<div class="style1">A quick brown fox jums over the lazy dog</div>

Styling the class=”style1″

Css code for class=’style1′, Copy and Paste the below code in your head tag of your html file, or in you .css file:

.shadow .style1{
color: #EEEEEE;
text-shadow: #CCC 1px 1px 1px;
}

Your Style 1 will be look like this

Style 2

Html code for Style 2, Copy and Paste the below code in your body tag your html file:

<div class="style2">A quick brown fox jums over the lazy dog</div>

Styling the class=”style2″

Css code for class=’style2′:

.shadow .style2{
color: #999;
text-shadow: #333 1px 1px 1px;
}

Your Style 2 will be look like this

Style 3

Html code for Style 3, Copy and Paste the below code in your body tag your html file:

<div class="style3">A quick brown fox jums over the lazy dog</div>

Styling the class=”style3″

Css code for class=’style3′:

.shadow .style3{
color: #0C3;
text-shadow: #060 1px 1px 1px;
}

Your Style 3 will be look like this

Style 4

Html code for Style 4, Copy and Paste the below code in your body tag your html file:

<div class="style4">A quick brown fox jums over the lazy dog</div>

Styling the class=”style4″

Css code for class=’style4′:

.shadow .style4{
color: #FFF;
text-shadow: #333 1px 1px 10px;
}

Your Style 4 will be look like this

Style 5

Html code for Style 5, Copy and Paste the below code in your body tag your html file:

<div class="style5">A quick brown fox jums over the lazy dog</div>

Styling the class=”style5″

Css code for class=’style5′:

.shadow .style5{
color: #FF0;
text-shadow: #F00 2px 2px 2px;
}

Your Style 5 will be look like this

Style 6

Html code for Style 6, Copy and Paste the below code in your body tag your html file:

<div class="style6">A quick brown fox jums over the lazy dog</div>

Styling the class=”style6″

Css code for class=’style6′:

.shadow .style6{
color: #090;
text-shadow: #0F0 -1px -1px 2px;
}

Your Style 6 will be look like this

Style 7

Html code for Style 7, Copy and Paste the below code in your body tag your html file:

<div class="style7">A quick brown fox jums over the lazy dog</div>

Styling the class=”style7″

Css code for class=’style7′:

.shadow .style7{
color: #000;
text-shadow: 0px 0px 8px #0F0;
}

Your Style 7 will be look like this

Style 8

Html code for Style 8, Copy and Paste the below code in your body tag your html file:

<div class="style8">A quick brown fox jums over the lazy dog</div>

Styling the class=”style8″

Css code for class=’style8′:

.shadow .style8{
color: #FF0;
text-shadow: 0px 0px 10px #F00,  0px 0px 15px  #FF0;
}

Your Style 8 will be look like this

Style 9

Html code for Style 9, Copy and Paste the below code in your body tag your html file:

<div class="style9">A quick brown fox jums over the lazy dog</div>

Styling the class=”style9″

Css code for class=’style9′:

.shadow .style9{
color: #FFF;
text-shadow: 0px 0px 8px #0FF,  0px 0px 10px #0F0;
}

Your Style 9 will be look like this

Style 10

Html code for Style 10, Copy and Paste the below code in your body tag your html file:

<div class="style10">A quick brown fox jums over the lazy dog</div>

Styling the class=”style10″

Css code for class=’style10′:

.shadow .style10{
color: #CCC;
text-shadow: #333 -0px -0px 2px;
}

Your Style 10 will be look like this

Style 11

Html code for Style 11, Copy and Paste the below code in your body tag your html file:

<div class="style11">A quick brown fox jums over the lazy dog</div>

Styling the class=”style11″

Css code for class=’style11′:

.shadow .style11{
color: #CCC;
text-shadow: -1px -1px 0px #666, 1px 1px 0px #FFF;
}

Your Style 11 will be look like this

Style 12

Html code for Style 12, Copy and Paste the below code in your body tag your html file:

<div class="style12">A quick brown fox jums over the lazy dog</div>

Styling the class=”style12″

Css code for class=’style12′:

.shadow .style12{
color: #CCC;
text-shadow: #FFF -1px 0px 0px, #000 1px 0px 0px;
}

Your Style 12 will be look like this

Style 13

Html code for Style 13, Copy and Paste the below code in your body tag your html file:

<div class="style13">A quick brown fox jums over the lazy dog</div>

Styling the class=”style13″

Css code for class=’style13′:

.shadow .style13{
color: #000;
text-shadow: #999 1px 1px 1px, #999 2px 2px 1px, #999 3px 3px 1px, #999 4px 4px 1px;
}

Your Style 13 will be look like this

Style 14

Html code for Style 14, Copy and Paste the below code in your body tag your html file:

<div class="style14">A quick brown fox jums over the lazy dog</div>

Styling the class=”style14″

Css code for class=’style14′:

.shadow .style14{
color: #00F;
text-shadow: #999 -1px -1px 1px, #999 -2px -2px 1px, #999 -3px -3px 1px, #999 -4px -4px 1px;
}

Your Style 14 will be look like this

Style 15

Html code for Style 15, Copy and Paste the below code in your body tag your html file:

<div class="style15">A quick brown fox jums over the lazy dog</div>

Styling the class=”style15″

Css code for class=’style15′:

.shadow .style15{
color: #00F;
text-shadow: #999 1px -1px 1px, #999 2px -2px 1px, #999 3px -3px 1px, #999 4px -4px 1px;
}

Your Style 15 will be look like this

And That’s it we are finished!

Live Demo is Available

Click here to view the live demo!