CSS3 shadow
CSS3 supported to add shadow to text or elements. Shadow property has divided as follows
Text shadow
CSS3 supported to add shadow effects to text. Following is the example to add shadow effects to text
<html>
<head>
<style>
h1 {
text-shadow: 2px 2px;
}
h2 {
text-shadow: 2px 2px red;
}
h3 {
text-shadow: 2px 2px 5px red;
}
h4 {
color: white;
text-shadow: 2px 2px 4px #000000;
}
h5 {
text-shadow: 0 0 3px #FF0000;
}
h6 {
text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}
p {
color: white;
text-shadow: 1px 1px 2px black, 0 0 25px blue, 0 0 5px darkblue;
}
</style>
</head>
<body>
<h1>Example.com</h1>
<h2>Example.com</h2>
<h3>Example.com</h3>
<h4>Example.com</h4>
<h5>Example.com</h5>
<h6>Example.com</h6>
<p>Example.com</p>
</body>
</html>
box shadow
Used to add shadow effects to elements,Following is the example to add shadow effects to element
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: red;
box-shadow: 10px 10px;
}
</style>
</head>
<body>
<div>This is a div element with a box-shadow</div>
</body>
</html>
It will produce the following result −
This is a div element with a box-shadow