CSS Shadows

Shadows are important tools for adding depth and dimensionality to web elements. CSS provides two main shadow properties: box-shadow for adding shadows to an element's box, and text-shadow for adding shadows to text content.

box-shadow

The box-shadow property allows you to add one or more shadows to an element. A basic shadow is defined by the following values:

box-shadow: [h-offset] [v-offset] [blur-radius] [spread-radius] [color] [inset];

• h-offset (Required): Horizontal offset. A positive value puts the shadow on the right side of the element, a negative value puts it on the left.
• v-offset (Required): Vertical offset. A positive value puts the shadow below the element, a negative value puts it above.
• blur-radius (Optional): Blur radius. The higher the number, the more blurred and soft the shadow's edge becomes. 0 means a sharp, unblurred shadow.
• spread-radius (Optional): Spread radius. A positive value spreads the shadow in all directions, making it larger; a negative value shrinks the shadow. Default is 0.
• color (Optional): The color of the shadow. If not specified, it usually takes the value of the element's color property.
• inset (Optional): If the inset keyword is set, the shadow will be an inner shadow, drawn inside the element.

Examples

/* A simple bottom-right shadow */
.shadow-1 {
  box-shadow: 5px 5px #888888;
}

/* A softer, more diffuse shadow */
.shadow-2 {
  box-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

/* An inner shadow */
.inset-shadow {
  box-shadow: inset 0 0 10px #000000;
}

Multiple Shadows

You can apply multiple shadows to an element by separating them with commas. This can be used to create more complex and realistic depth effects.

.multi-shadow {
  box-shadow: 0 1px 1px rgba(0,0,0,0.12),
              0 2px 2px rgba(0,0,0,0.12),
              0 4px 4px rgba(0,0,0,0.12),
              0 8px 8px rgba(0,0,0,0.12),
              0 16px 16px rgba(0,0,0,0.12);
}

text-shadow

The text-shadow property is used to add shadows to text. Its syntax is very similar to box-shadow, but without spread-radius and inset.

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

Examples

/* Add a simple shadow to a heading */
h1 {
  text-shadow: 2px 2px 4px #000000;
}

/* Create an "embossed" effect */
.emboss {
  color: white;
  text-shadow: 1px 1px 1px #000, -1px -1px 1px #fff;
}

/* Create a glow effect */
.glow {
  color: #fff;
  text-shadow: 0 0 5px #fff,
               0 0 10px #fff,
               0 0 20px #ff00de,
               0 0 30px #ff00de,
               0 0 40px #ff00de;
}

By skillfully using shadows, you can significantly improve the texture and professionalism of your design.