Simple Text Shadow Effect using CSS3

Here are some cool and easy to implement text shadow effect that I have been using a lot recently. They don’t take much but they do add a lot more depth and detail to your text.

Here is some black text on a grey background with a 1 pixel white text shadow.

That one is subtle but looks great. All it takes is this little bit of CSS.

text-shadow: #fff 0 1px 0;

The text-shadow style accepts four different values:

  • The color (hex code)
  • The x-coordinate relative to the text (pixels)
  • The y-coordinate relative to the text (pixels)
  • The blur radius (pixels)

For the code above, I have set the color to white (#fff) with no x-coordinate value, a 1 pixel y-coordinate value and no blur radius. So my white text-shadow appears as a white stroke 1 pixel below my text, giving it a bit of depth.
You can also use a similar style to create a letterpress effect.

LETTERPRESS

This effect uses the following CSS:

text-shadow: #777 0 2px 3px;

We could even take it a step further and add a second text-shadow.

LETTERPRESS

The text-shadow style also accepts multiple settings, separated by a comma.
The above CSS looks like this:

text-shadow: -1px -1px 2px #333, #777 0 2px 3px;

The difference is subtle but very effective.
Here are some examples of other text shadows:

Regular dark shadow on red text.

text-shadow: #444 1px 1px 1px;
A lot of blur on white text.

text-shadow: #000 0 0 20px;
Block shadow

text-shadow: #222 1px 1px 0

As it stands, the text-shadow style does not work in current releases of IE, though it is suppose to work in IE 9.

Share this:

Email
Facebook
Twitter
Pinterest
Pocket

Premium Themes for WordPress

Looking for an easy-to-use Premium Theme for WordPress? Check out Themes by bavotasan.com and have your site up and running in no time.

Use this WordPress website builder to build powerful websites in no time for your or your clients.

WordPress Hosting

WP Engine – designed from the ground-up to support and enhance the workflow of web designers.

Bluehost – providing quality web hosting solutions since 1996.

About the author

Picture of Luke Perrie

Luke Perrie