The text-shadow Property in CSS

The text-shadow property in CSS is used to apply shadow effects to text. This property allows you to add depth, enhance text readability, or create visual interest by applying shadows with specified colors, offsets, and blur radii.

Syntax

The text-shadow property has the following syntax:

text-shadow: h-offset v-offset blur-radius color;

• h-offset: The horizontal offset of the shadow from the text. Positive values move the shadow to the right, while negative values move it to the left.
• v-offset: The vertical offset of the shadow from the text. Positive values move the shadow down, while negative values move it up.
• blur-radius: The blur radius of the shadow, which determines how blurry or sharp the shadow edges are. A higher value creates a more blurred shadow. This value is optional.
• color: The color of the shadow. It can be specified using color names, hex codes, RGB, RGBA, HSL, or HSLA.

Values and Examples

1. Basic Shadow

   • Example: Adds a simple shadow to the text with a 2px horizontal offset, 2px vertical offset, and a color of black.

   .basic-shadow {
     text-shadow: 2px 2px 2px black; /* Horizontal offset: 2px, Vertical offset: 2px, Blur radius: 2px, Color: black */
   }
   

2. No Blur Radius

   • Example: Adds a shadow with no blur radius, creating a sharp shadow.

   .sharp-shadow {
     text-shadow: 3px 3px 0 red; /* Horizontal offset: 3px, Vertical offset: 3px, Blur radius: 0, Color: red */
   }
   

3. Multiple Shadows

   • Example: Applies multiple shadows to the text, separated by commas. Each shadow can have different offsets, blur radii, and colors.

   .multiple-shadows {
     text-shadow: 1px 1px 2px gray, -1px -1px 2px lightgray; /* Applies two shadows with different offsets and colors */
   }
   

4. Text Shadow with Transparency

   • Example: Adds a shadow with a transparent color, creating a subtle effect.

   .transparent-shadow {
     text-shadow: 4px 4px 5px rgba(0, 0, 0, 0.5); /* Horizontal offset: 4px, Vertical offset: 4px, Blur radius: 5px, Color: semi-transparent black */
   }
   

Explanation

• Horizontal Offset (h-offset): Determines how far the shadow is shifted horizontally from the text. Positive values shift the shadow right, and negative values shift it left.
• Vertical Offset (v-offset): Determines how far the shadow is shifted vertically from the text. Positive values shift the shadow down, and negative values shift it up.
• Blur Radius (blur-radius): Controls the blurriness of the shadow. A value of 0 creates a sharp shadow, while higher values make the shadow more blurred.
• Color (color): Defines the color of the shadow. It can be solid or semi-transparent.

Use Cases

• Enhanced Readability: Use text shadows to make text stand out against complex backgrounds or enhance legibility in designs.
• Design and Styling: Apply shadows for stylistic effects to create depth, emphasis, or a 3D look.
• Visual Effects: Combine multiple shadows to create intricate text effects or to simulate lighting.