CSS Shadows

🧑‍🎨 What are CSS Shadows?

CSS Shadows are visual effects used to create depth by displaying shadows behind elements or text. These effects help in making UI elements more interactive or dynamic.

📦 Box Shadow (box-shadow)

The box-shadow property allows you to add shadows to elements like div, button, img, etc.

Syntax:

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

• h-offset: Horizontal shadow position (positive for right, negative for left).
• v-offset: Vertical shadow position (positive for down, negative for up).
• blur: The blur radius (greater value = more blur).
• spread: The size of the shadow (positive = grows, negative = shrinks).
• color: The color of the shadow (e.g., rgba(0, 0, 0, 0.5)).
• inset: Optional; changes the shadow to be an inner shadow.

Example:

.box {
  width: 200px;
  height: 200px;
  background-color: #3498db;
  box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5);
}

This applies a shadow 10px right, 10px down, with a blur of 20px and a semi-transparent black color.

🅰️ Text Shadow (text-shadow)

The text-shadow property is used to add shadow effects to text.

Syntax:

text-shadow: h-offset v-offset blur color;

• h-offset: Horizontal shadow position (positive for right, negative for left).
• v-offset: Vertical shadow position (positive for down, negative for up).
• blur: The blur radius (greater value = more blur).
• color: The color of the shadow.

Example:

.heading {
  font-size: 48px;
  text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This adds a slight shadow 2px right, 2px down, with a blur of 5px and a semi-transparent black color.

🧩 Multiple Shadows

You can apply multiple shadows to a single element by separating them with commas. This works for both box-shadow and text-shadow.

Example: Multiple Box Shadows

.box {
  width: 200px;
  height: 200px;
  background-color: #e74c3c;
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.5), -2px -2px 10px rgba(0, 0, 0, 0.2);
}

This creates a box with two shadows — one in the bottom-right and another in the top-left, creating a more dynamic effect.

Example: Multiple Text Shadows

.heading {
  font-size: 48px;
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5), 0 0 25px rgba(255, 255, 255, 0.7);
}

This applies two text shadows — one with a slight blur and another larger, glowing effect.

🖌️ Customizing Shadows

You can combine shadow effects with other properties like border-radius and background-color to create unique styles.

Example: Rounded Box with Shadow

.box {
  width: 250px;
  height: 250px;
  background-color: #1abc9c;
  border-radius: 15px;
  box-shadow: 15px 15px 30px rgba(0, 0, 0, 0.3);
}

This creates a box with rounded corners and a shadow that adds depth.

📝 Key Takeaways

🧪 Try Yourself

import './styles.css';

function App() {
return (
  <div>
    <div className="box">Box Shadow Example</div>
    <h1 className="heading">Text Shadow Example</h1>
  </div>
);
}

export default App;