🌑 CSS Tutorial: box-shadow

📌 Introduction

The box-shadow property in CSS is used to add shadows around an element’s box—creating depth, elevation, and visual hierarchy. It supports multiple shadows, blur effects, color control, inset shadows, and more. This property is essential for modern UI design (cards, buttons, modals, neumorphism, etc.) ✨

🎯 What Does box-shadow Do?

  • Adds shadow behind or inside an element
  • Supports blur, spread, color, and offsets
  • Can apply multiple shadows
  • Essential for depth-based UI (Material Design)

✨ Syntax

Syntax

box-shadow: <offset-x> <offset-y> <blur-radius> <spread-radius> <color> inset;

Note

Only offset-x and offset-y are required. All other values are optional.

🧩 Parameter Breakdown

1. offset-x

Horizontal shadow position. Positive → right, Negative → left.

2. offset-y

Vertical shadow position. Positive → down, Negative → up.

3. blur-radius

Controls softness of the shadow. Higher = more blur.

4. spread-radius

Expands or shrinks the shadow size.

5. color

Color of the shadow, usually with transparency (RGBA).

6. inset

Makes the shadow appear inside the element instead of outside.

🔥 Basic Examples

1. Simple Soft Shadow

Simple Shadow

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

2. Sharp Shadow

Sharp Shadow

.box {
  box-shadow: 2px 2px 0px rgba(0, 0, 0, 0.5);
}

3. Inset Shadow

Inset Shadow

.input {
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.3);
}

4. Multi-Layer Shadow

Multiple Shadows

.card {
  box-shadow:
    0 4px 10px rgba(0,0,0,0.2),
    0 1px 3px rgba(0,0,0,0.1);
}

🔥 Advanced Examples

1. Neumorphism Effect

Neumorphism

.neo {
  background: #e0e0e0;
  border-radius: 20px;
  box-shadow:
    10px 10px 20px #bebebe,
    -10px -10px 20px #ffffff;
}

2. Glowing Shadow

Glow Effect

.glow {
  box-shadow: 0 0 20px rgba(0, 150, 255, 0.7);
}

3. Inner + Outer Shadow Combo

Inner + Outer

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

4. Floating Card Shadow

Floating Card

.floating {
  box-shadow:
    0 10px 20px rgba(0,0,0,0.15),
    0 6px 6px rgba(0,0,0,0.1);
}

5. Pixel Art Shadow (Retro UI)

Pixel Shadow

.pixel {
  box-shadow: 5px 5px 0px #000;
}

📊 Box-Shadow Visualization Table

ValueEffect
0 0 10pxSoft blur around element
10px 10pxShadow pushed right & down
insetShadow inside the box
spread-radiusIncreases shadow area
Multiple shadowsLayered & realistic effects

🧠 Tips for Better Shadow Design

  • Use low opacity for realistic shadows (rgba(..., 0.1–0.3))
  • Combine multiple shadows for depth
  • Avoid hard black shadows → use soft grey
  • Use larger blur + small offset for floating cards
>>“Good shadows don’t steal attention — they guide the user’s eyes naturally.” ✨

🎉 Conclusion

The box-shadow property is indispensable for modern UI/UX design. From subtle card shadows to glowing effects and neumorphism, mastering shadows helps you create depth, realism, and visual hierarchy in your interfaces. Experiment with offsets, blur, inset, and multiple layers to build stunning designs. 🚀