text-shadow

by

The text-shadow CSS property allows you to add a drop shadow effect to text. It takes multiple shadow values as input, each consisting of four components:

  1. Offset-x: The horizontal offset of the shadow, measured in pixels. Positive values move the shadow to the right, while negative values move it to the left.
  2. Offset-y: The vertical offset of the shadow, measured in pixels. Positive values move the shadow downwards, while negative values move it upwards.
  3. Blur-radius: The blur radius of the shadow, measured in pixels. A larger blur radius creates a more diffuse shadow.
  4. Color: The color of the shadow.

Syntax

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

Multiple Shadows

text-shadow: 2px 2px 4px black, 1px 1px 2px rgba(0, 0, 0, 0.5);

This code applies two shadows: a darker, more prominent one and a lighter, more subtle one.

Example

<p>This text has a text shadow.</p>
p {
  text-shadow: 2px 2px 4px black;
}

This will display the text with a black drop shadow that is slightly offset to the right and bottom.

Key Points

  • The text-shadow property is applied to the text itself, not to the surrounding element.
  • The shadow is positioned relative to the text’s baseline.
  • The blur radius affects the softness and spread of the shadow.
  • You can use multiple shadows to create more complex effects.

Additional Considerations

  • Experiment with different offset values, blur radius, and colors to achieve the desired effect.
  • Consider the font size and weight when setting the shadow parameters.
  • Be mindful of the overall design and readability of the text with the shadow applied.