codescracker


css

CSS3 Text Shadow



« Previous Tutorial Next Tutorial »


Demo CSS3 Shadow

You can create Shadow effects using CSS3

CSS3 Shadow Effects

Using CSS3 you can add shadow to text and to elements

You can add shadow effects using CSS3 for text using properties: text-shadow.

CSS3 Text Shadow Effects

The CSS3 text-shadow property applies shadow to text

It is very simple to apply shadow effects on texts using CSS3

Let's look at the following example:

CSS Example Source Code:
<!DOCTYPE html>
<html>
<body>

<p style="text-shadow:1px 1px 1px red;font-size:120%;">This is having 1px red shadow all around</p>
<p style="text-shadow:1px 1px blue;font-size:120%;">This is having blue vertical shadow(1px) and blue horizontal shadow(1px)</p>
<p style="text-shadow:2px 2px 5px green; font-size:120%;">This is having a blur effect to the shadow</p>
<p style="text-shadow:2px 2px 3px black;color:white;font-size:120%;">This is having black blur shadow at white text</p>
</body>
</html>

It will produce the following result:

Above CSS Example Output:

This is having 1px red shadow all around

This is having blue vertical shadow(1px) and blue horizontal shadow(1px)

This is having a blur effect to the shadow

This is having black blur shadow at white text

Multiple Text Shadows with CSS3

To add more than one shadow to the text, you can add a comma-separated list of shadows

Let's look at the following example which shows a red and blue neon glow shadow:

CSS Example Source Code:
<!DOCTYPE html>
<html>
<body>

<p style="font-size:120%;text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;">This is having multiple shadow effects</p>

</body>
</html>

It will produce the following result:

Above CSS Example Output:

This is having multiple shadow effects


« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test