<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <svg> <filter id=lightA3> <feGaussianBlur in='SourceAlpha' stdDeviation='3' result='B' /> <feSpecularLighting in='B' specularExponent='128' result='S'> <feDistantLight azimuth='225' elevation='70' /> </feSpecularLighting> <feComposite in='S' in2='SourceAlpha' operator='in' result='L' /> <feComposite in='SourceGraphic' in2='L' operator='arithmetic' k2='1' k3='1' /> </filter> <filter id=in-and-out> <feGaussianBlur stdDeviation='4' in='SourceAlpha' /> <feOffset result='fO' dy='5' dx='5' /> <feComposite in2='fO' operator='xor' in='SourceGraphic' /> </filter> </svg> <p data-text='Glass Text'>Glass Text</p> See similar pens at <a href=https://codepen.io/nokiss/pens/popular target=_blank>Codepen</a> <br> More text effects at <a href=http://users.atw.hu/nyejani/gallery/gallery.htm target=_blank>nokiss</a>

* { margin: 0; padding: 0; box-sizing: border-box; lighting-color: #ccc } body { background: url(http://users.atw.hu/nyejani/print/textures/marble.jpg); padding: 1em } svg { position: absolute; top: -999em } filter { color-interpolation-filters: sRGB } p { position: relative; font-family: cursive; font-weight: bold; font-size: 8rem; text-align: center; text-shadow: 0 0 .7px, 0 0 1.1px, 0 0 1.1px; filter:url(#in-and-out) } p:before, p:after { position: absolute; left: 0; right: 0; top: 0; content: attr(data-text) } p:before { color: #036; text-shadow: -1px -1px 1px, 0 -1px 1px, 1px -1px 1px, 1px 0 1px, 1px 1px 1px, 0 1px 1px, -1px 1px 1px, -1px 0 1px } p:after { color: rgba(40, 80, 120, .9); filter:url(#lightA3) }