How to achieve shadows with text using CSS?

Question

How can I manipulate text with shadows in CSS to achieve an effect like the “30 Free Vector Icons” text below?

Answer 1

try this :

HTML :

<div style="background:#ccccc;"><h1 class="myshadow">Cool text</h1></div>

CSS :

    h1.myshadow{
            color: #C8C8C8;
            letter-spacing: 2px;
            text-shadow: 1px 1px white, -1px -1px #444;
    }

CSS property you need to use is text-shadow

More info : http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Answer 2

There is the text-shadow property, which is reasonably well-supported outside of Internet Explorer. IE’s Glow filter provides a kind of similar effect.

Safari and Chrome also have -webkit-text-stroke, but that’s not supported anywhere else.