Introduction

CSS shadows can be applied to elements to create visual depth and dimension, enhancing their appearance and making them stand out on the page.

Key Points About CSS Shadows

1. Box Shadows:
   • CSS offers the box-shadow property to add shadows to elements. Box shadows create a shadow effect around the border box of an element, giving it a lifted or floating appearance.
2. Inset Shadows:
   • In addition to box shadows, CSS supports inset shadows, which create shadows inside the border box of an element. Inset shadows are commonly used to create inner shadow effects, such as depth or inset borders.
3. Text Shadows:
   • CSS also provides the text-shadow property to add shadows to text elements. Text shadows create a shadow effect behind text characters, improving readability and adding visual interest to typography.

CSS Text Shadow

The CSS text-shadow property applies shadow to text.

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

Output:-

add a blur effect to the shadow:

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

Output

add more than one shadow to the text, you can add a comma-separated list of shadows.

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

Output

use the text-shadow property to create a plain border around some text (without shadows):

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

Output

box-shadow Property in CSS

Horizontal and a Vertical Shadow

In its simplest use, you only specify a horizontal and a vertical shadow.

div {
  width: 300px;
  height: 100px;
  padding: 15px;
  color:blue;
  background-color: green;
  box-shadow: 5px 5px;
}

Output

Specify a Color for the Shadow

div {
  box-shadow: 10px 10px lightblue;
}

Add a Blur Effect to the Shadow

div {
  box-shadow: 10px 10px 5px lightblue;
}

Output

Set inset Parameter in CSS shadows

The inset parameter changes the shadow from an outer shadow (outset) to an inner shadow.

div {
  width: 300px;
  height: 100px;
  padding: 15px;
  color:blue;
  background-color: green;
   
  box-shadow: 10px 10px 5px lightblue inset;
}

Output

Conclusion

CSS shadows are useful for adding depth and visual interest to web elements. The box-shadow property creates external shadows, giving elements a floating appearance. Inset shadows add inner shadows for depth effects. The text-shadow property enhances text readability and appearance. These properties offer versatile ways to enhance the design of web pages.

Frequently Asked Question