CSS

🎯 CSS box-shadow Property

The box-shadow CSS property is used to add shadow effects to HTML elements. It helps create depth, elevation, and a more realistic 3D appearance on web components.

With box-shadow, you can control the shadow’s position, blur, spread, and color to achieve different visual effects.

🔹 Why Use box-shadow?

Key Benefits
Adds depth and elevation to elements.
Improves modern UI/UX appearance.
Helps highlight important components.
Useful for cards, buttons, and modals.

🧩 Syntax Example

CSS


div {
    box-shadow: 5px 5px 10px 2px rgba(0, 0, 0, 0.5);
}

📌 Breakdown
Horizontal offset → 5px (right side)
Vertical offset → 5px (bottom)
Blur radius → 10px (soft shadow)
Spread radius → 2px (shadow expansion)
Color → semi-transparent black

🔹 box-shadow Values

1️⃣ none

Removes any shadow from the element.

CSS


div {
    box-shadow: none;
}

2️⃣ inset

Makes the shadow appear inside the element instead of outside.

CSS


div {
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}

3️⃣ initial

Resets the property to its default value (none).

CSS


div {
    box-shadow: initial;
}

🧠 Summary
box-shadow adds shadow effects to HTML elements.
It improves UI depth and visual hierarchy.
inset creates inner shadows, while normal creates outer shadows.

CSS box-decoration-break

CSS resize

CSS

CSS