Shadow effect

CSS3 shadow effects add a sense of depth and dimensionality to web elements. With the box-shadow and text-shadow properties, you can easily achieve visual effects ranging from simple projections to complex lighting. Below is an explanation from basic syntax to advanced applications.

Basic Syntax of box-shadow

The box-shadow property is used to add shadow effects to elements. Its syntax is as follows:

box-shadow: h-offset v-offset blur spread color inset;

Parameter descriptions:

• h-offset: Horizontal offset (required)
• v-offset: Vertical offset (required)
• blur: Blur radius (optional)
• spread: Shadow spread size (optional)
• color: Shadow color (optional)
• inset: Inset shadow (optional)

Basic Shadow Example

.card {
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

This creates a gray shadow offset 5px to the right and bottom with a 10px blur radius.

Multiple Shadow Effects

Multiple shadows can be layered by separating them with commas:

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

This layered shadow technique is often used to create a "floating" effect.

Inset Shadow Application

Use the inset keyword to create inner shadows:

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

Ideal for pressed button states or recessed effects.

Advanced Shadow Techniques

Neon Light Effect

.neon {
  box-shadow: 
    0 0 5px #fff,
    0 0 10px #fff,
    0 0 15px #0073e6,
    0 0 20px #0073e6;
}

Irregular Shadows

Achieved with pseudo-elements:

.tooltip::after {
  content: "";
  position: absolute;
  width: 15px;
  height: 15px;
  background: white;
  transform: rotate(45deg);
  box-shadow: 3px 3px 5px rgba(0,0,0,0.2);
}

text-shadow for Text Shadows

Simpler syntax:

h1 {
  text-shadow: 2px 2px 4px #000000;
}

Text Effect Example

.3d-text {
  text-shadow: 
    1px 1px 0 #ccc,
    2px 2px 0 #bbb,
    3px 3px 0 #aaa;
}

Performance Optimization Tips

1. Avoid frequently changing shadow parameters in animations.
2. Larger blur radius values consume more performance.
3. Use will-change: box-shadow to optimize rendering.

Browser Compatibility Solutions

For older browsers:

.shadow {
  -webkit-box-shadow: 3px 3px 5px #666;
  -moz-box-shadow: 3px 3px 5px #666;
  box-shadow: 3px 3px 5px #666;
}

Practical Application Scenarios

Card Design

.product-card {
  box-shadow: 
    0 1px 3px rgba(0,0,0,0.12),
    0 1px 2px rgba(0,0,0,0.24);
  transition: box-shadow 0.3s;
}

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

Input Field Focus State

input:focus {
  box-shadow: 0 0 0 2px #4a90e2;
}

Combining Shadows with Filters

Use filter: drop-shadow() for more complex effects:

.icon {
  filter: drop-shadow(3px 3px 2px rgba(0,0,0,0.7));
}

Dynamic Shadow Control

Achieve dynamic adjustments with CSS variables:

:root {
  --shadow-color: 0,0,0;
}

.element {
  box-shadow: 0 4px 8px rgba(var(--shadow-color), 0.3);
}