CSS3 Text Shadow

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more

This is a text shadowing effect.

text-shadow:
  _horizontal_offset_
  _vertical_offset_
  (_blur_)
  _color_,
  (_other_shadows_);

let’s take a look at a live example at cdpn.io/e/aDLCl.

The text-shadow property has a twin: box-shadow. Go to the Box Shadow page to see a detailed description of the syntax. It is very similar.

Tip – you can use multiple text shadow values to create a pseudo-3D effect.

Browser Support

IE10+. In older browsers, you can use a fallback without a shadow (preferred) or simply create an IE8 version. Using Modernizr conditions or IE conditional comments you can create a DropShadow (using a Microsoft filter).


Content

Introduction

Introduction

On today’s frontend UI development

UI development transformations

Tools, technologies and workflows

Fallback strategies

CSS3 reference guide

Introduction

Text properties

Background properties

Border properties

Box properties

Media Queries

CSS transforms

CSS animations

CSS3 Layout

Another CSS3 Properties

Non-standard properties

End

End

Buy ebook

CSS Mine

Get my e-book focusing on CSS3 and
modern web UI development.

Learn more