CSS3 Shadow

CSS3 Shadow

CSS3 provides two types of shadows that will be applied either on text or to the element.

Followings are the CSS3 shadow property:

  • 1.0 box-shadow
  • 2.0 text-shadow

Text Shadow

CSS text-shadow adds a shadow around the text.

The general syntax of text shadow:

  • x-offset-Used to set up the horizontal shadow of the text.
  • y-offset-used to set up the vertical shadow of the text.
  • blur-radius-Used to set the amount of blur which makes the text look hazy.
  • color Used to set shadow color of the text.

Text Shadow Using X-offset & Y-offset

Source Code

Try it now

Text Shadow Without Blur Radius

Source Code

Try it now

Text Shadow Using Blur Radius

Source Code

Try it now

Text Shadow Without Color

Source Code

Try it now

Text Shadow Using Color

Source Code

Try it now

Multiple Text Shadow Property

Multiple text-shadow properties are applied to the text by separating text shadow property by a comma.

Source Code

Try it now