Shadow effect without creating any image through CSS
.text{
width:500px; height:100px; Line-height:100px; font-family:"Trebuchet MS", Verdana, Arial; font-size:1.1em; text-transform:uppercase; color:#fff; text-align:center; font-weight:bold;
}
.shadow {
background-color:#000; box-shadow: 5px 5px 5px #ccc; -moz-box-shadow: 5px 5px 5px #ccc; -webkit-box-shadow: 5px 5px 5px #ccc;
}
.inshadow {
width:500px; height:100px; background-color:#f00; box-shadow:inset 0 0 10px #000000; -moz-box-shadow:inset 0 0 10px #000000; -webkit-box-shadow:inset 0 0 10px #000000;
}
<div class="shadow text">Shadow Outside</div>
<br />
<div class="inshadow text">Shadow Inside</div>
