codescracker


css

CSS3 Text Shadow



« Previous Tutorial Next Tutorial »


CSS3 Demo Text Shadow

You can create text Shadow using CSS3

You can add shadow effects on texts using CSS3 text-shadow property.

CSS3 Text Shadow Example

Here is an example shows how to set shadow effect on text using CSS3 text-shadow property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Text Shadow Example</title>
	<style>
		h2 { text-shadow:2px 2px red; }
	</style>
</head>
<body>

<h2>text-shadow effect</h2>
<p>This is CSS3 Text Shadow Tutorial</p>

</body>
</html>

Here is the output produced by the above CSS3 text shadow example code:

CSS Text Shadow

Let's take another example to understand more about applying shadow effect on text using CSS3 text-shadow property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Text Shadow Example</title>
</head>
<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>

Here is the sample output produced by the above CSS3 text-shadow property example code:

css3 text shadow example

CSS3 Multiple Text Shadows

Here is an example shows how to create multiple shadow effect on text using CSS3 text-shadow property:

<!DOCTYPE html>
<html>
<head>
	<title>CSS3 Multiple Text Shadow Example</title>
</head>
<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>

Following is the output of the above CSS3 multiple text shadow effect example code:

css3 multiple text shadow

« Previous Tutorial Next Tutorial »



Tools
Calculator

Quick Links
Signup - Login - Give Online Test