CSS Shadows and Effects

Introduction

Shadows and effects add depth, realism, and hierarchy to your UI. CSS provides box-shadow, text-shadow, glow effects, layered shadows, inset shadows, filters, and transitions.

1. Basic Box Shadow

.box {
  box-shadow: 0 4px 10px rgba(0,0,0,0.4);
}

2. Understanding Shadow Parameters

box-shadow: offsetX offsetY blur spread color;
    
box-shadow: 2px 4px 8px 0 rgba(0,0,0,0.5);

3. Multiple Shadows

box-shadow:
  0 3px 6px rgba(0,0,0,0.4),
  0 8px 20px rgba(0,0,0,0.2);

4. Inset Shadows

Shadow inside the element.

box-shadow: inset 0 0 20px rgba(0,0,0,0.6);

5. Soft Glow Effect

box-shadow: 0 0 15px #64b5f6;

6. Neon Glow UI

.neon {
  color: #64b5f6;
  text-shadow:
    0 0 5px #64b5f6,
    0 0 15px #64b5f6,
    0 0 30px #64b5f6;
}

7. Text Shadows

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

8. Frosted Glass Effect

.glass {
  backdrop-filter: blur(10px);
  background: rgba(255,255,255,0.1);
}

9. Drop Shadow Filter (For Images)

img {
  filter: drop-shadow(0 5px 10px rgba(0,0,0,0.5));
}

10. Hover Shadow Elevation

.card {
  transition: box-shadow 0.3s ease;
}

.card:hover {
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}

11. Pressed Button Effect

button:active {
  box-shadow: inset 0 2px 5px rgba(0,0,0,0.6);
}

12. Smooth Shadow Transition

.element {
  transition: box-shadow .25s ease, transform .25s ease;
}

.element:hover {
  transform: translateY(-3px);
}

13. Floating Card Design

.card {
  box-shadow: 0 12px 40px rgba(0,0,0,0.4);
  border-radius: 12px;
}

14. Pixel Shadow (Retro Look)

.pixel {
  box-shadow:
    4px 4px 0 #000,
    8px 8px 0 #555;
}

15. Summary