VOOZH about

URL: https://www.geeksforgeeks.org/css/css-text-shadow-property/

⇱ CSS text-shadow Property - GeeksforGeeks

  • Courses
  • Tutorials
  • Interview Prep

CSS text-shadow Property

Last Updated : 22 May, 2026

The text-shadow property in CSS is used to add shadow effects to text, creating depth and visual emphasis. It allows developers to enhance the appearance of text elements with stylish shadow effects.

  • Accepts values for horizontal offset, vertical offset, blur radius, and shadow color.
  • Multiple shadow effects can be applied by separating values with commas.
  • The default value is none, meaning no shadow effect is applied to the text.

Syntax 

text-shadow: h-shadow v-shadow blur-radius color | none | initial | inherit;

Property values

Here are the property values for the text-shadow CSS property:

Property Description
h-shadow Defines the horizontal position of the shadow. Negative values move the shadow to the left.
v-shadow Controls the vertical position of the shadow. Negative values move the shadow upwards.
blur-radius Determines the blurriness of the shadow. The default is 0, meaning no blur. Optional.
none No shadow will be applied to the text. This is the default value.
color Specifies the color of the shadow. This value is optional.
initial Resets the text-shadow property to its default value.
inherit Inherits the value of the text-shadow property from its parent element.

CSS text-shadow Property Examples

Example 1: Adding a Simple Shadow

Here, we applies a green text shadow to the <h1> element with a horizontal offset of 5px, vertical offset of 5px, blur radius of 8px, and color #00FF00.

Example 2: Creating a Glowing Text Effect

Here, we creates a glowing text effect for <h2> with multiple shadows using text-shadow, styled with contrasting background and padding for visibility.

Example 3: Adding Multiple Shadows for Depth

Here, we apply multiple shadows to an <h3> element to create a layered effect, simulating depth. The shadows are offset in different directions and colors.

Comment
Article Tags: