You're here: Home » CSS » CSS Text Shadow Effects

CSS Text Shadow Effects

On Nov 2, 2011 under CSS

The CSS3 text-shadow effects that I have posted here are supported by all major browsers, except IE – as usual IE sucks! Who cares about IE anyway? The text-shadow property of CSS3 creates the desired effect.

The syntax of text-shadow is given below:

text-shadow: horizontal-shadow vertical-shadow blur color;

View Demo

In the CSS code posted here I haven’t entered the font size and alignment as it might change based on your needs.

Glow Effect

CSS

.glow-effect {
    color: #fff;
    text-shadow: 0px 0px 20px #faffaa;
    background: #9c0000;
}

HTML

<p class="glow-effect">Glow Effect</p>

Inset Effect

CSS

.inset-effect {
    color: #272727;
    text-shadow: 0px 2px 4px #838383;
    background: #666666;
}

HTML

<p class="inset-effect">Inset Effect</p>

Stroke Effect

CSS

.stroke-effect {
    color: #204900;
    text-shadow: 2px 2px 0 #fff, -1px -1px 0 #fff, 1px -1px 0 #fff, -1px  1px 0 #fff, 1px  1px 0 #fff;
    background: #95e853;
}

HTML

<p class="stroke-effect">Stroke Effect</p>

3D Effect

CSS

.threed-effect {
    color: #202020;
    text-shadow: 1px 1px 0px #b28a4c, 2px 2px 0px #b28a4c, 3px 3px 0px #b28a4c, 4px 4px 0px #b28a4c, 5px 5px 0px #b28a4c;
    background: #f6d7a7;
}