Adding Depth and Style

CSS shadow and filter effects add depth, dimension, and visual interest to your designs.

Shadows can be applied to boxes, text, and even create advanced visual effects.

/* Box Shadow */
.card {
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

/* Multiple Shadows */
.fancy {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 4px 8px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1);
}

/* Text Shadow */
h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

/* Inset Shadow */
.inset {
  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Filter Effects */
.blur { filter: blur(5px); }
.grayscale { filter: grayscale(100%); }
.brightness { filter: brightness(150%); }

• box-shadow: x y blur spread color
• text-shadow: x y blur color
• inset - Shadow inside element
• filter - Visual effects (blur, grayscale, etc.)
• drop-shadow() - Filter shadow
• Multiple shadows separated by commas

<div class="shadow-grid">
  <div class="shadow-box s1">Subtle Shadow</div>
  <div class="shadow-box s2">Medium Shadow</div>
  <div class="shadow-box s3">Strong Shadow</div>
  <div class="shadow-box s4">Colored Shadow</div>
</div>
<h2 class="text-glow">Glowing Text</h2>