CSS Shadow

CSS shadow can be applied to either text or boxes (like div, button, input, etc.), using two powerful properties:

• text-shadow → used for text elements
• box-shadow → used for boxes and containers

These two properties allow you to apply shadow to elements around content for enhanced visibility, aesthetics, or to achieve effects such as 3D shadows, glassmorphism, glowing buttons or frosted UI.

1. Box Shadow (box-shadow)

🔧 Syntax:

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

• offset-x:the distance the shadow moves sideways (right or left).
• offset-y: how far the shadow moves vertically (up or down).
• blur-radius: How blurry or sharp the shadow is.
• spread-radius: how big or small the shadow spreads.
• color: the color of the shadow.

Example:

box-shadow: 5px 5px 10px 0px rgba(0, 0, 0, 0.3);

Simple Box Shadow Example

HTML (relevant part)

<div style="width:200px; height:100px; background:#fff; box-shadow: 5px 5px 15px rgba(0,0,0,0.3); padding:20px;">
  This box has a shadow!
</div>

Example in action:

💥 Multiple Shadows

You can add multiple shadows using commas:

box-shadow: 2px 2px 5px red, -2px -2px 5px blue;

Creates a cool layered glowing effect.

Example in action:

Colored and Neon Shadow Example

HTML (relevant part)

<button style="padding: 10px 20px; background: black; color: white; box-shadow: 0 0 10px lime;">
  Glowing Button
</button>

Example in action:

2. Text Shadow (text-shadow)

🔧 Syntax:

text-shadow: offset-x offset-y blur-radius color;

This works the same as box-shadow, but only for text.

Simple Text Shadow Example

HTML (relevant part)

<h1 style="text-shadow: 2px 2px 4px gray;">
  Shadowed Text
</h1>

Example in action:

Shadowed Text

Rainbow Text Shadow

HTML (relevant part)

<h2 style="color: transparent; text-shadow: 0 0 2px red, 0 0 5px orange, 0 0 10px yellow, 0 0 15px green, 0 0 20px blue, 0 0 25px indigo, 0 0 30px violet;">
  Rainbow Glow
</h2>

Example in action:

Rainbow Glow

Looks stunning on dark backgrounds!

Use Cases for CSS Shadow

Advanced Shadow Effect: Glassmorphism Card

HTML (relevant part)

<div style="
  background: rgba(255, 255, 255, 0.1);
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(10px);
  border-radius: 15px;
  padding: 20px;
  color: white;
  width: 300px;
">
  <h3>Glass Effect Card</h3>
  <p>This uses shadow + blur</p>
</div>

Example in action:

Real-World UI Examples

Login Box Shadow

box-shadow: 0 4px 8px rgba(0,0,0,0.2);

Hover Effect

button:hover {
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

Inset Shadow (Shadow inside the box)

box-shadow: inset 2px 2px 5px #aaa;

Best Practices

• Use RGBA or HSLA to create smooth transparent shadows.
• Always test shadows on light and dark backgrounds.
• Use subtle shadows for clean UI.
• Avoid too many shadows — they can slow performance.
• For performance, avoid large blur + multiple shadows on slow devices.

Summary: Learn Like a Master

• box-shadow = shadows for boxes
• text-shadow = shadows for text
• Shadows create depth, focus, emphasis, and beauty
• Can be used for glow, inset, neon, glass, 3D, and more
• Practice with real-world components: buttons, cards, modals, headers

Practice Projects for Freshers

Conclusion

CSS Shadow is the magic that takes a flat form to a dimensional style. When you learn how shadow works, and work with it, you can make your site look modern, smooth, and professional.

Just start simple, keep playing with values, and watch the magic happen.