CSS Box Shadow

• Purpose: The box-shadow property in CSS adds a shadow effect to an element, making it appear as if it’s “lifted” from the page.
• Syntax: element { box-shadow: h-shadow v-shadow blur spread color inset; }
  • h-shadow: The horizontal offset of the shadow. Positive values move the shadow to the right, and negative values to the left.
  • v-shadow: The vertical offset of the shadow. Positive values move the shadow downwards, and negative values upwards.
  • blur: The blur radius of the shadow. Higher values create a more diffused shadow.
  • spread: The shadow’s spread radius. Positive values increase the shadow’s size, and negative values decrease it.
  • color: The color of the shadow.
  • inset: (Optional) If present, create an inner shadow instead of an outer shadow.
• Example:

.card {
   box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); 
}

This will create a shadow on the .card element with:

• A horizontal offset of 5 pixels.
• A vertical offset of 5 pixels.
• A blur radius of 10 pixels.
• A black color with 20% opacity (rgba(0, 0, 0, 0.2)).