[CSS3] Text Shadows


CSS3 provides you with some amazing text effects that can make your web pages look impressive and stylish.


1. text-shadow

The “text-shadow” property applies shadow to text.

text-shadow: h-offset v-offset [blur-distance] [spread-distance] color;

p#texta { font-size:2em; text-shadow: 2px 2px red; }
p#textb { text-shadow: 2px 2px red, 4px 4px green; }

Note that you can specify multiple shadows in a single definition.



2. Blurring Effect

The third paramter specifies the depth of the blurring effect.

p#texta { text-shadow: 2px 2px 4px red; }
p#textb { text-shadow: 2px 2px 8px green; }


3. Letterpress Effect

The letterpress effect gives an inset or debossing appearance to text. You can create this effect using the “text- shadow” property without using PhotoShop.

  font-family:Tahoma,Arial; color:#333; font-size:4em;
  text-shadow:0px 3px 3px #666;


4. Neon Glow Effect

You can create the neon glow effect by setting the values like this:

  • horizontal offset : 0px
  • vertical offset : 0px
  • blur distance : non-zero

By doing so, text will look like glowing.

  font-family:Tahoma; font-size:4em;

    0px 0px 6px green,
    0px 0px 10px #0c0;


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s