CSS Underglow Effect
HTML
<header>
<h1>CSS Underglow Effect</h1>
</header>
<span id="shadow"> </span>
CSS
body {
background: #eee;
margin: 0px;
font-family: sans-serif;
}
header {
border-bottom: solid 1px #e9e9e9;
padding: 10px;
padding-left: 40px;
margin-bottom: 80px;
}
#shadow {
background-image: -webkit-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 180, 255, 0.25) 0%, rgba(0, 180, 255, 0) 100%);
background-image: -moz-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 180, 255, 0.25) 0%, rgba(0, 180, 255, 0) 100%);
background-image: -ms-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 180, 255, 0.25) 0%, rgba(0, 180, 255, 0) 100%);
background-image: -o-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 180, 255, 0.25) 0%, rgba(0, 180, 255, 0) 100%);
background-image: radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 180, 255, 0.25) 0%, rgba(0, 180, 255, 0) 100%);
width: 100%;
height: 12px;
display: block;
float: center;
position: relative;
top: -80px;
z-index: -99;
}