How to achieve shadow with text using CSS?

Question

How can I manipulate text with shadows in CSS to achieve an effect such as “30 free vector icons” below?

Answer 1

try the following:

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; } 

The CSS property you need to use is text-shadow

Additional information: http://www.w3schools.com/cssref/css3_pr_text-shadow.asp

Answer 2

Here are some CSS3 shadow info

Here are the various methods for getting shadow shadows and text shadows http://www.webdesignshock.com/css3-drop-shadow

Below are the text shadow examples.

http://line25.com/articles/using-css-text-shadow-to-create-cool-text-effects

And to visually match your example, this demo uses the same colors and effects.

http://line25.com/wp-content/uploads/2010/text-shadow/demo/index.html

Answer 3

There is a text-shadow property that is fairly well supported outside of Internet Explorer. IEs Glow filter provides a similar effect.

Safari and Chrome also have -webkit-text-stroke , but this is not supported anywhere.