CSS Box Shadow: Syntax, Usage, and Examples

The CSS box-shadow property adds shadows to elements, helping create depth and visual emphasis. You can use it to simulate elevation, create soft glowing effects, or apply inset shadows to elements like buttons, cards, and containers.

How to Use the CSS Box Shadow Property

Use the box-shadow property with this syntax:

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

Each value controls a different aspect of the shadow:

• offset-x moves the shadow horizontally (positive values shift it right, negative values shift it left).
• offset-y moves the shadow vertically (positive values move it down, negative values move it up).
• blur-radius determines how soft the shadow appears (higher values create a smoother blur).
• spread-radius expands or shrinks the shadow (positive values increase its size, negative values decrease it).
• color defines the shadow’s color, which can be any valid CSS color.

Example of a Basic Box Shadow

.box {
  width: 200px;
  height: 100px;
  background-color: lightgray;
  box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.5);
}

This shadow appears 5 pixels to the right and down, with a slight blur to soften the edges.

When to Use the CSS Box Shadow Property

Enhancing Depth and Contrast

Use box shadows to make elements stand out by adding a sense of depth. This technique works well for buttons, cards, and modal windows.

.button {
  background-color: blue;
  color: white;
  padding: 10px 20px;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
}

This slight shadow makes the button more noticeable without overwhelming the design.

Creating a Neumorphism Effect

Neumorphism mimics raised or recessed surfaces using subtle shadows.

.neumorphic {
  background: #e0e0e0;
  box-shadow: 5px 5px 10px #bebebe, -5px -5px 10px #ffffff;
}

This effect gives the element a soft, embossed look.

Highlighting Focused Elements

Apply a glow effect to form fields when users interact with them.

input:focus {
  box-shadow: 0px 0px 5px 2px rgba(0, 120, 255, 0.5);
}

This shadow visually indicates that the input field is active.

Examples of CSS Box Shadow in Action

Adding a Shadow to a Card

.card {
  width: 300px;
  padding: 20px;
  background: white;
  box-shadow: 4px 4px 15px rgba(0, 0, 0, 0.2);
}

This shadow makes the card appear elevated, distinguishing it from the background.

Creating an Inset Box Shadow

.inset-box {
  width: 200px;
  height: 100px;
  background: white;
  box-shadow: inset 5px 5px 10px rgba(0, 0, 0, 0.3);
}

The inset keyword moves the shadow inside the element, making it look recessed.

Applying a Shadow to Only the Bottom

.bottom-shadow {
  width: 250px;
  height: 100px;
  background: lightgray;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
}

This effect simulates a shadow cast by a light source above the element.

Learn More About CSS Box Shadow

Applying Multiple Shadows

You can stack multiple shadows by separating them with commas.

This technique creates a layered shadow effect, useful for neumorphism and glowing elements.

Customizing Box Shadow Color

Adjust the shadow color to match your design and create contrast.

.colored-shadow {
  box-shadow: 5px 5px 15px rgba(255, 0, 0, 0.5);
}

A red-tinted shadow can emphasize important elements, such as alerts or call-to-action buttons.

Creating a Soft Glow Effect

Increase the blur radius to achieve a glowing effect.

.glow {
  box-shadow: 0px 0px 15px rgba(0, 255, 0, 0.6);
}

This effect works well for buttons, hover states, or neon-style elements.

Optimizing Box Shadows for Performance

Shadows can affect rendering performance, especially on mobile devices. Reduce the blur radius and avoid excessive layering to maintain smooth performance. Properly applied shadows enhance design without slowing down the page.

The CSS box-shadow property offers endless design possibilities, from subtle elevation to dramatic effects. Experiment with different values to refine your layouts and create engaging user experiences.