text-shadow1.png
text-shadow2.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>text-shadow</title>
<style type="text/css">
*{
padding: 0;
margin: 0;
}
div{
font-size: 44px;
font-weight: bold;
height: 50px;
margin: 0 auto;
padding: 40px 0;
text-align: center;
width: 380px;
}
.text1{
background: #454545;
color: #333;
text-shadow: -1px -1px #ccc, 1px 1px #666 ;
}
.text2{
background: #000;
color: white;
text-shadow:0 0 5px #f0f ,0 0 15px rgba(255, 0, 255, 0.8),0 0 25px rgba(255, 0, 255, 0.8),0 0 35px rgba(255, 0, 255, 0.8),0 0 45px rgba(255, 0, 255, 0.8);
}
.text3{
background: #ddd;
color: #fff;
text-shadow:0 1px 0 #ccc, 0 2px 0 #c9c9c9, 0 3px 0 #bbb, 0 4px 0 #b9b9b9, 0 5px 0 #aaa, 0 6px 1px rgba(0, 0, 0, 0.1), 0 0 5px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.3), 0 3px 5px rgba(0, 0, 0, 0.2), 0 5px 10px rgba(0, 0, 0, 0.25);
}
.text4{
background: #eee;
color: transparent;
text-shadow:0 0 6px red;
}
.text5{
background: red;
color: #ccc;
text-shadow:-1px -1px #333, 1px 1px #fff;
}
.text6{
background: #eee none repeat scroll 0 0;
color: #707070;
text-shadow: 0 -1px #00f, 0 1px #00f, 1px 0 #00f, -1px 0 #00f;
}
.text7{
background: #eee none repeat scroll 0 0;
color: rgba(255, 0, 0, 0.8);
text-shadow: 0 -3px 6px rgba(255, 0, 0, 0.8), 0 -6px 10px rgba(255, 64, 0, 0.8), 0 -10px 16px rgba(255, 127, 0, 0.8), 0 -16px 24px rgba(255, 127, 0, 0.4), 0 -22px 30px rgba(255, 127, 0, 0.1);
}
.text8{
border-radius: 400px/100px;
background: rgba(153, 153, 238, 0.1);
-moz-transform:rotateY(100deg);
box-shadow:1px -1px 0 0 rgba(153, 153, 238, 0.1), 2px -2px 0 0 rgba(153, 153, 238, 0.1), 3px -3px 0 0 rgba(153, 153, 238, 0.1), 4px -4px 0 0 rgba(153, 153, 238, 0.1), 5px -5px 0 0 rgba(153, 153, 238, 0.1), 6px -6px 0 0 rgba(153, 153, 238, 0.1), 7px -7px 0 0 rgba(153, 153, 238, 0.1), 8px -8px 0 0 rgba(153, 153, 238, 0.1), 9px -9px 0 0 rgba(153, 153, 238, 0.1), 10px -10px 0 0 rgba(153, 153, 238, 0.1), 11px -11px 0 0 rgba(153, 153, 238, 0.1), 12px -12px 0 0 rgba(153, 153, 238, 0.1), 13px -13px 0 0 rgba(153, 153, 238, 0.1), 14px -14px 0 0 rgba(153, 153, 238, 0.1), 15px -15px 0 0 rgba(153, 153, 238, 0.1);
}
</style>
</head>
<body>
<div class="text1">Beautiful Text</div>
<div class="text2">Beautiful Text</div>
<div class="text3">Beautiful Text</div>
<div class="text4">Beautiful Text</div>
<div class="text5">Beautiful Text</div>
<div class="text6">Beautiful Text</div>
<div class="text7">Beautiful Text</div>
<div class="text8">Beautiful Text</div>
</body>
</html>
