Box Shadow in CSS

Subject: css

Box Shadow in CSS

The box-shadow property in CSS is used to add shadow effects to elements such as containers, cards, buttons, and images. It improves the visual depth and elevation of components, helping users visually distinguish content areas.

Syntax

🚀 Try it in Compiler

Parameters:

  • h-offset (required): Horizontal shadow position (positive = right, negative = left)
  • v-offset (required): Vertical shadow position (positive = bottom, negative = top)
  • blur-radius (optional): Determines the softness of the shadow
  • spread-radius (optional): Expands or shrinks the shadow size
  • color (optional): Shadow color
  • inset (optional): Changes the shadow from outer to inner

Example 1: Basic Outer Shadow

🚀 Try it in Compiler

Creates a soft gray shadow offset 5px right and down.

Example 2: Inner Shadow (Inset)

🚀 Try it in Compiler
  • Adds shadow inside the element
  • Commonly used for pressed buttons or input fields

Example 3: Multiple Shadows

🚀 Try it in Compiler
  • Adds light and dark shadows from different angles
  • Creates a layered or 3D look

Example 4: Shadow with Spread Radius

🚀 Try it in Compiler
  • 2px spread radius increases the shadow’s size
  • Useful for highlighting cards, modals, and overlays

Use Cases for box-shadow

  • Cards & Containers: Adds elevation and separation
  • Buttons: Indicates depth or hover effect
  • Modals: Emphasizes focus area
  • Forms: Enhances user input feedback

Best Practices

  • Keep shadows subtle to avoid a cluttered interface
  • Use rgba() for transparent, soft shadows
  • Test shadows in both light and dark modes
  • Combine with transition for smooth animations

Key Takeaways

  • box-shadow creates visual depth and hierarchy in UI elements
  • You can control offset, blur, spread, color, and direction
  • Use inset to create inner shadows (pressed look)
  • Multiple shadows can be layered using commas
  • Test across devices and themes for visual consistency