totn CSS

CSS: text-shadow property

This CSS tutorial explains how to use the CSS property called text-shadow with syntax and examples.

Description

The CSS text-shadow property defines shadow effects for the text of an element.

Syntax

The syntax for the text-shadow CSS property is:

text-shadow: none;

OR

text-shadow: offset-x offset-y [blur-radius] [color];

Parameters or Arguments

offset-x

Required. It is the horizontal distance that can be either a positive or negative value. If offset-x is a negative value, the shadow will be placed to the left of the text. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y and color
div { text-shadow: 2px 3px black; }
offset-y

Required. It is the vertical distance that can be either a positive or negative value. If offset-y is a negative value, the shadow will be placed above the text. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y and color
div { text-shadow: 3px 1px red; }
blur-radius

Optional. It can not be a negative value. The larger the blur-radius value, the bigger the blur. It can be one of the following:

Value Description
fixed Fixed value expressed in px, em, ...

Example below shows offset-x, offset-y, blur-radius and color
div { text-shadow: 3px 1px 2px #F5F5F5; }
color

Optional. It is the color of the text-shadow and can be one of the following:

Value Description
#RRGGBB Hexadecimal representation of the color

Example below shows offset-x, offset-y and color
div { text-shadow: 2px 2px #FF0000; }
rgb() RGB representation of the color

Example below shows offset-x, offset-y and color
div { text-shadow: 2px 2px rgb(255,0,0); }
name Name of the color (ie: red, blue, black, white)

Example below shows offset-x, offset-y and color
div { text-shadow: 2px 2px red; }

Note

  • The offset-x and offset-y values are required for the CSS text-shadow property.
  • The color value is not required, but since the default for the text-shadow is transparent, the text-shadow will not appear unless you specify a color value.
  • The larger the blur-radius value, the bigger the blur. The blur-radius value can not be negative.
  • If the color value is omitted, the browser will choose the color (color may vary across browsers).
  • Need to convert your color value to a different representation? Try this online tool to convert your color value between hexadecimal and RGB.

Browser Compatibility

The CSS text-shadow property has basic support with the following browsers:

  • Chrome
  • Firefox (Gecko)
  • Internet Explorer 10+ (IE 10+)
  • Opera 9.5+
  • Safari (WebKit)

Example

We will discuss the text-shadow property below, exploring examples of how to use this property in CSS.

Using Shadow

Let's look at a CSS text-shadow example to show how to create a text-shadow.

div { text-shadow: 2px 3px #F5F5F5; }

In this CSS text-shadow example, we have created a text-shadow for the <div> tag. The offset-x value is set to 2px, the offset-y value is set to 3px and the color is set to #F5F5F5.

Next, let's add the blur-radius to our text-shadow:

div { text-shadow: 2px 3px 5px #F5F5F5; }

In this CSS text-shadow example, we have set the offset-x value to 2px, the offset-y value to 3px, the blur-radius to 5px, and the color to #F5F5F5.

Using No Shadow

Let's look at a CSS text-shadow example where we remove a text-shadow.

div { text-shadow: none; }

In this CSS text-shadow example, we have removed the shadow effect by setting the text-shadow property to none for the <div> tag.

Share on: