CSS · Visual Effects

Shadows

box-shadow, text-shadow, and drop-shadow()

Find videos you like?

Save to resource drawer for future reference!

CSS Shadows

Add depth with shadows

Shadows = Depth & Focus! 📦

Shadows add depth to flat designs. Use box-shadow for elements,text-shadow for text, and drop-shadow() filter for complex shapes!

box-shadow

Elements

text-shadow

Text

drop-shadow()

Filters

box-shadow Syntax

Shadow for box elements

Complete Syntax

box-shadow: [inset] x y blur spread color;

/* Examples */
box-shadow: 2px 4px 6px rgba(0,0,0,0.1);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

x-offset: Horizontal

y-offset: Vertical

blur: Blur radius

spread: Shadow size

Subtle

box-shadow: 0 1px 3px rgba(0,0,0,0.1);

Medium

box-shadow: 0 4px 6px rgba(0,0,0,0.15);

Large

box-shadow: 0 10px 25px rgba(0,0,0,0.2);

Inner

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Interactive Demo

Different shadow styles

CSS Shadows Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📦 CSS Shadows Gallery</h1>
      <div class="grid">
        <div class="card subtle">
          <div class="label">Subtle Shadow</div>
          <div class="description">0 1px 3px</div>
        </div>
        <div class="card medium">
          <div class="label">Medium Shadow</div>
          <div class="description">0 4px 6px</div>
        </div>
        <div class="card large">
          <div class="label">Large Shadow</div>
          <div class="description">0 10px 25px</div>
        </div>
        <div class="card inner">
          <div class="label">Inner Shadow</div>
          <div class="description">inset 0 2px 4px</div>
        </div>
        <div class="card colored">
          <div class="label">Colored Shadow</div>
          <div class="description">Brand color</div>
        </div>
        <div class="card multi">
          <div class="label">Multiple Shadows</div>
          <div class="description">Layered depth</div>
        </div>
        <div class="card text-shadow">
          <h2>Text Shadow</h2>
          <div class="description">2px 2px 4px</div>
        </div>
        <div class="card text-glow">
          <h2>Text Glow</h2>
          <div class="description">Multiple shadows</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

text-shadow

Shadows for text

text-shadow: x y blur color;

/* Examples */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 0 0 10px rgba(255,255,255,0.8);

/* Multiple shadows */
text-shadow: 
  2px 2px 0 #000,
  4px 4px 0 #666;

Basic Shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

Glow Effect

text-shadow: 0 0 10px rgba(255,255,255,0.8);

3D Effect

text-shadow: 1px 1px 0 #000, 2px 2px 0 #666;

Multiple Shadows

Layer shadows for depth

Separate multiple shadows with commas for layered effects:

/* Layered shadows */
.card {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* Material Design elevation */
.elevated {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1),
    0 16px 32px rgba(0,0,0,0.1);
}

Remember

box-shadow for elements, text-shadow for text

Use rgba() for semi-transparent shadows

Layer multiple shadows for depth

Animate shadows on :hover for interactivity

Previous Topic

CSS Shapes

shape-outside, shape-margin, shape-image-threshold, and text wrapping around shapes.

Next Topic

CSS Variables

Custom properties (--var), var(), dynamic theming, scope, inheritance, and design systems.

Ask a Question

Have a question about Shadows? Ask our AI assistant.

🔐 Login to use AI Assistant

CSS · Visual Effects

Shadows

box-shadow, text-shadow, and drop-shadow()

Find videos you like?

Save to resource drawer for future reference!

CSS Shadows

Add depth with shadows

Shadows = Depth & Focus! 📦

Shadows add depth to flat designs. Use box-shadow for elements,text-shadow for text, and drop-shadow() filter for complex shapes!

box-shadow

Elements

text-shadow

Text

drop-shadow()

Filters

box-shadow Syntax

Shadow for box elements

Complete Syntax

box-shadow: [inset] x y blur spread color;

/* Examples */
box-shadow: 2px 4px 6px rgba(0,0,0,0.1);
box-shadow: 0 10px 20px rgba(0,0,0,0.2);
box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

x-offset: Horizontal

y-offset: Vertical

blur: Blur radius

spread: Shadow size

Subtle

box-shadow: 0 1px 3px rgba(0,0,0,0.1);

Medium

box-shadow: 0 4px 6px rgba(0,0,0,0.15);

Large

box-shadow: 0 10px 25px rgba(0,0,0,0.2);

Inner

box-shadow: inset 0 2px 4px rgba(0,0,0,0.1);

Interactive Demo

Different shadow styles

CSS Shadows Gallery

Frontend

<!DOCTYPE html>
<html lang="en">
  <head>
  </head>
  <body>
    <div class="container">
      <h1>📦 CSS Shadows Gallery</h1>
      <div class="grid">
        <div class="card subtle">
          <div class="label">Subtle Shadow</div>
          <div class="description">0 1px 3px</div>
        </div>
        <div class="card medium">
          <div class="label">Medium Shadow</div>
          <div class="description">0 4px 6px</div>
        </div>
        <div class="card large">
          <div class="label">Large Shadow</div>
          <div class="description">0 10px 25px</div>
        </div>
        <div class="card inner">
          <div class="label">Inner Shadow</div>
          <div class="description">inset 0 2px 4px</div>
        </div>
        <div class="card colored">
          <div class="label">Colored Shadow</div>
          <div class="description">Brand color</div>
        </div>
        <div class="card multi">
          <div class="label">Multiple Shadows</div>
          <div class="description">Layered depth</div>
        </div>
        <div class="card text-shadow">
          <h2>Text Shadow</h2>
          <div class="description">2px 2px 4px</div>
        </div>
        <div class="card text-glow">
          <h2>Text Glow</h2>
          <div class="description">Multiple shadows</div>
        </div>
      </div>
    </div>
  </body>
</html>

Live Preview

Loading preview...

text-shadow

Shadows for text

text-shadow: x y blur color;

/* Examples */
text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
text-shadow: 0 0 10px rgba(255,255,255,0.8);

/* Multiple shadows */
text-shadow: 
  2px 2px 0 #000,
  4px 4px 0 #666;

Basic Shadow

text-shadow: 2px 2px 4px rgba(0,0,0,0.5);

Glow Effect

text-shadow: 0 0 10px rgba(255,255,255,0.8);

3D Effect

text-shadow: 1px 1px 0 #000, 2px 2px 0 #666;

Multiple Shadows

Layer shadows for depth

Separate multiple shadows with commas for layered effects:

/* Layered shadows */
.card {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
}

/* Material Design elevation */
.elevated {
  box-shadow:
    0 2px 4px rgba(0,0,0,0.1),
    0 8px 16px rgba(0,0,0,0.1),
    0 16px 32px rgba(0,0,0,0.1);
}

Remember

box-shadow for elements, text-shadow for text

Use rgba() for semi-transparent shadows

Layer multiple shadows for depth

Animate shadows on :hover for interactivity

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

CSS Shapes

CSS Variables

Building Your Learning Module...

Shadows

Shadows = Depth & Focus! 📦

Complete Syntax

CSS Shadows Gallery

Remember

CSS Shapes

CSS Variables

Shadows

Shadows = Depth & Focus! 📦

Complete Syntax

CSS Shadows Gallery

Remember