Modern Heading Style

Inset Heading Separators / Borders with shadow

by badri09

HTML

<!-- Throw in a nice looking font just for the fun of it -->
<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700,300,200"/>

<h1>Jennifer Perrin &middot; Continuously Building Up</h1>
<span id="shadow">&nbsp;</span>
<h1>Jennifer Perrin &middot; Continuously Building Up</h1>
<span id="shadow">&nbsp;</span>

CSS

h1 {
    padding: 15px;
    -webkit-font-smoothing: antialiased;
    color: #444;
    font: 18px "Yanone Kaffeesatz", sans-serif;
    letter-spacing: .01em;
    margin: 20px;
    border-bottom: 1px solid rgba(0,0,0,0.15);
    
   
}


#shadow {
    padding-top: 10px;
    background-image: -webkit-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 0, 0, 0.25) 0%, rgba(0, 180, 255, 0) 70%);
    background-image: -moz-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    background-image: -ms-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    background-image: -o-radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    background-image: radial-gradient(50% 0%, ellipse farthest-side, rgba(0, 0, 0, 0.25) 0%, rgba(255, 255, 255, 0) 70%);
    width: 100%;
    height: 12px;
    display: block;
    float: center;
    position: relative;
    top: -20px;
    z-index: -99;
}