CSS Shadows

Master CSS shadows to add depth and dimension with box-shadow and text-shadow for modern, visually appealing designs.

CSS shadows add depth, dimension, and visual interest to web designs. They're essential for creating modern, layered interfaces.

Box Shadow

The box-shadow property adds shadows to elements.

.element {
  box-shadow: offset-x offset-y blur-radius spread-radius color;
}

Basic Box Shadow

.card {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /* x-offset y-offset blur color */
}

.elevated {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Shadow Properties

.detailed-shadow {
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
  /* horizontal vertical blur spread color */
}

Offset-X: Horizontal distance (positive = right, negative = left)
Offset-Y: Vertical distance (positive = down, negative = up)
Blur-radius: Softness of shadow (optional, default 0)
Spread-radius: Size expansion (optional, default 0)
Color: Shadow color (use rgba for transparency)

Multiple Shadows

.complex {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.layered {
  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);
}

Inset Shadows

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

.pressed {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

Text Shadow

The text-shadow property adds shadows to text.

.text {
  text-shadow: offset-x offset-y blur-radius color;
}

Basic Text Shadow

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtle {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.bold {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

Multiple Text Shadows

.glowing {
  color: white;
  text-shadow: 
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
}

.outlined {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

Practical Examples

Card Shadows (Material Design)

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

.card-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
              0 6px 6px rgba(0, 0, 0, 0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
              0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30),
              0 15px 12px rgba(0, 0, 0, 0.22);
}

Button Shadows

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Floating Effect

.floating {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

Neumorphism

.neumorphic {
  background: #e0e0e0;
  box-shadow: 
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
  border-radius: 20px;
  padding: 30px;
}

.neumorphic-pressed {
  background: #e0e0e0;
  box-shadow: 
    inset 8px 8px 16px #bebebe,
    inset -8px -8px 16px #ffffff;
}

Glass Morphism

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

Image Shadow

.image-shadow {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.polaroid {
  padding: 10px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}

.modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.modal-overlay {
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.5);
}

.navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}

.dropdown {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

Text Effects

/* Embossed text */
.embossed {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 3D text */
.text-3d {
  color: #333;
  text-shadow:
    1px 1px 0 #666,
    2px 2px 0 #666,
    3px 3px 0 #666,
    4px 4px 0 #666,
    5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Neon glow */
.neon {
  color: #fff;
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00,
    0 0 40px #00ff00;
}

/* Long shadow */
.long-shadow {
  color: #fff;
  text-shadow:
    1px 1px 0 #999,
    2px 2px 0 #888,
    3px 3px 0 #777,
    4px 4px 0 #666,
    5px 5px 0 #555,
    6px 6px 0 #444,
    7px 7px 0 #333,
    8px 8px 0 #222;
}

Input Shadows

input {
  border: 1px solid #ddd;
  padding: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(0, 123, 255, 0.3);
}

Colored Shadows

.blue-shadow {
  box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
}

.red-shadow {
  box-shadow: 0 8px 16px rgba(255, 0, 0, 0.3);
}

.gradient-shadow {
  position: relative;
}

.gradient-shadow::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  width: 80%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3), transparent);
  filter: blur(10px);
}

Performance Tips

Performance

Shadows can impact rendering performance
Use sparingly for complex shadows
Avoid animating shadows (animate opacity instead)
Use will-change for animated shadow elements
Consider using images for very complex shadows

/* Better performance */
.element {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.element:hover {
  opacity: 0.8; /* Animate opacity, not shadow */
}

/* If you must animate shadows */
.animated-shadow {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

Best Practices

Shadow Best Practices

Use subtle shadows for depth
Match shadow color to design theme
Keep blur radius reasonable (2-20px)
Use rgba for transparent shadows
Layer multiple shadows for realism
Consider light source direction
Test shadows on different backgrounds
Use inset for pressed/input effects
Avoid overly dark shadows
Maintain consistency across similar elements

Accessibility

Ensure shadows don't reduce text readability
Don't rely on shadows alone for meaning
Test with high contrast modes
Ensure sufficient contrast with shadows

Browser Support

Box-shadow and text-shadow have excellent browser support. Use vendor prefixes for very old browsers if needed.

Master shadows to add depth, dimension, and polish to your designs!

CSS shadows add depth, dimension, and visual interest to web designs. They're essential for creating modern, layered interfaces.

Box Shadow

The box-shadow property adds shadows to elements.

.element {
  box-shadow: offset-x offset-y blur-radius spread-radius color;
}

Basic Box Shadow

.card {
  box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.2);
  /* x-offset y-offset blur color */
}

.elevated {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.soft {
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

Shadow Properties

.detailed-shadow {
  box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.3);
  /* horizontal vertical blur spread color */
}

Offset-X: Horizontal distance (positive = right, negative = left)
Offset-Y: Vertical distance (positive = down, negative = up)
Blur-radius: Softness of shadow (optional, default 0)
Spread-radius: Size expansion (optional, default 0)
Color: Shadow color (use rgba for transparency)

Multiple Shadows

.complex {
  box-shadow: 
    0 1px 3px rgba(0, 0, 0, 0.12),
    0 1px 2px rgba(0, 0, 0, 0.24);
}

.layered {
  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);
}

Inset Shadows

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

.pressed {
  box-shadow: inset 0 4px 8px rgba(0, 0, 0, 0.3);
}

Text Shadow

The text-shadow property adds shadows to text.

.text {
  text-shadow: offset-x offset-y blur-radius color;
}

Basic Text Shadow

h1 {
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
}

.subtle {
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.1);
}

.bold {
  text-shadow: 3px 3px 6px rgba(0, 0, 0, 0.5);
}

Multiple Text Shadows

.glowing {
  color: white;
  text-shadow: 
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00;
}

.outlined {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

Practical Examples

Card Shadows (Material Design)

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

.card-2 {
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16),
              0 3px 6px rgba(0, 0, 0, 0.23);
}

.card-3 {
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19),
              0 6px 6px rgba(0, 0, 0, 0.23);
}

.card-4 {
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25),
              0 10px 10px rgba(0, 0, 0, 0.22);
}

.card-5 {
  box-shadow: 0 19px 38px rgba(0, 0, 0, 0.30),
              0 15px 12px rgba(0, 0, 0, 0.22);
}

Button Shadows

.button {
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
  transition: box-shadow 0.3s ease;
}

.button:hover {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
}

.button:active {
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

Floating Effect

.floating {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.floating:hover {
  transform: translateY(-8px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.25);
}

Neumorphism

.neumorphic {
  background: #e0e0e0;
  box-shadow: 
    8px 8px 16px #bebebe,
    -8px -8px 16px #ffffff;
  border-radius: 20px;
  padding: 30px;
}

.neumorphic-pressed {
  background: #e0e0e0;
  box-shadow: 
    inset 8px 8px 16px #bebebe,
    inset -8px -8px 16px #ffffff;
}

Glass Morphism

.glass {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  box-shadow: 
    0 8px 32px 0 rgba(31, 38, 135, 0.37);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 10px;
}

Image Shadow

.image-shadow {
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
  border-radius: 8px;
}

.polaroid {
  padding: 10px;
  background: white;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: rotate(-2deg);
}

.modal {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  border-radius: 8px;
}

.modal-overlay {
  box-shadow: inset 0 0 200px rgba(0, 0, 0, 0.5);
}

.navbar {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  position: fixed;
  top: 0;
  width: 100%;
  background: white;
}

.dropdown {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15);
  border-radius: 4px;
}

Text Effects

/* Embossed text */
.embossed {
  color: #fff;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
}

/* 3D text */
.text-3d {
  color: #333;
  text-shadow:
    1px 1px 0 #666,
    2px 2px 0 #666,
    3px 3px 0 #666,
    4px 4px 0 #666,
    5px 5px 10px rgba(0, 0, 0, 0.3);
}

/* Neon glow */
.neon {
  color: #fff;
  text-shadow:
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 30px #00ff00,
    0 0 40px #00ff00;
}

/* Long shadow */
.long-shadow {
  color: #fff;
  text-shadow:
    1px 1px 0 #999,
    2px 2px 0 #888,
    3px 3px 0 #777,
    4px 4px 0 #666,
    5px 5px 0 #555,
    6px 6px 0 #444,
    7px 7px 0 #333,
    8px 8px 0 #222;
}

Input Shadows

input {
  border: 1px solid #ddd;
  padding: 10px;
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

input:focus {
  outline: none;
  border-color: #007bff;
  box-shadow: 
    inset 0 1px 3px rgba(0, 0, 0, 0.1),
    0 0 8px rgba(0, 123, 255, 0.3);
}

Colored Shadows

.blue-shadow {
  box-shadow: 0 8px 16px rgba(0, 123, 255, 0.3);
}

.red-shadow {
  box-shadow: 0 8px 16px rgba(255, 0, 0, 0.3);
}

.gradient-shadow {
  position: relative;
}

.gradient-shadow::after {
  content: '';
  position: absolute;
  top: 100%;
  left: 10%;
  width: 80%;
  height: 20px;
  background: radial-gradient(ellipse, rgba(0, 0, 0, 0.3), transparent);
  filter: blur(10px);
}

Performance Tips

Performance

Shadows can impact rendering performance
Use sparingly for complex shadows
Avoid animating shadows (animate opacity instead)
Use will-change for animated shadow elements
Consider using images for very complex shadows

/* Better performance */
.element {
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

.element:hover {
  opacity: 0.8; /* Animate opacity, not shadow */
}

/* If you must animate shadows */
.animated-shadow {
  will-change: box-shadow;
  transition: box-shadow 0.3s ease;
}

Best Practices

Shadow Best Practices

Use subtle shadows for depth
Match shadow color to design theme
Keep blur radius reasonable (2-20px)
Use rgba for transparent shadows
Layer multiple shadows for realism
Consider light source direction
Test shadows on different backgrounds
Use inset for pressed/input effects
Avoid overly dark shadows
Maintain consistency across similar elements

Accessibility

Ensure shadows don't reduce text readability
Don't rely on shadows alone for meaning
Test with high contrast modes
Ensure sufficient contrast with shadows

Browser Support

Box-shadow and text-shadow have excellent browser support. Use vendor prefixes for very old browsers if needed.

Master shadows to add depth, dimension, and polish to your designs!

CSS Shadows

On this page

CSS Shadows

On this page