CSS Text Shadow

Shadows in CSS are a powerful way to make your text and elements look more engaging. By adding shadows, you can give your website a sense of depth, make important content stand out, and even create glowing effects that grab attention.

CSS provides two main properties to create shadow effects:

• text-shadow → for adding shadows to text.
• box-shadow → for adding shadows to boxes, divs, buttons, and other elements.

Let’s go step by step with examples and explanations.

CSS Text Shadow

The text-shadow property allows you to add shadows behind your text. It accepts values in the following format:

• Horizontal shadow (X-axis): Moves the shadow left or right.
• Vertical shadow (Y-axis): Moves the shadow up or down.
• Blur radius (optional): How soft or sharp the shadow looks.
• Color: The color of the shadow.

text-shadow: horizontal vertical blur color;

Basic Example

h1 {
  text-shadow: 2px 2px;
}

Adding Shadow with Color

You can use the text-shadow property to add shadows in any color, making your text more stylish and noticeable.

h1 {
  text-shadow: 2px 2px red;
}

Adding Blur Effect

The text-shadow property lets you blur shadows by adding a blur radius, giving your text a softer and more glowing appearance.

h1 {
  text-shadow: 2px 2px 5px red;
}

White Text with Black Shadow

This is great for making light text visible on colorful backgrounds.

h1 {
  color: white;
  text-shadow: 2px 2px 4px #000000;
}

Neon Glow Effect

You can simulate a glowing text effect by using a blur with a bright color.

h1 {
  text-shadow: 0 0 3px #FF0000;
}

Multiple Text Shadows

CSS allows you to add multiple shadows to the same text by separating them with commas. This creates richer visual effects.

Red + Blue Glow

You can combine multiple shadows with different colors using text-shadow to create a glowing effect, like red and blue neon around your text.

h1 {
  text-shadow: 0 0 3px #FF0000, 0 0 5px #0000FF;
}

White Text with Layered Shadows

By applying multiple shadows in different colors and positions, you can create depth and a glowing effect around white text.

h1 {
  color: white;
  text-shadow: 1px 1px 2px black,
               0 0 25px blue,
               0 0 5px darkblue;
}

Border-Like Effect with Shadows

Instead of using stroke (not supported in all browsers), you can fake a border around text with shadows:

h1 {
  color: coral;
  text-shadow: -1px 0 black,
               0 1px black,
               1px 0 black,
               0 -1px black;
}

CSS Box Shadow

While text-shadow only works on text, box-shadow lets you add shadows to any element (buttons, cards, containers).

Basic Box Shadow

div {
  width: 200px;
  height: 100px;
  background: lightblue;
  box-shadow: 5px 5px;
}

Box Shadow with Blur and Color

The box-shadow property lets you add a shadow with blur and color to any element, creating a soft, realistic, and visually appealing depth effect.

div {
  box-shadow: 5px 5px 15px rgba(0,0,0,0.5);
}

Multiple Box Shadows

You can add several shadows to an element by separating them with commas, creating layered or glowing effects for more striking designs.

div {
  box-shadow: 0 0 10px red, 0 0 20px blue;
}