CSS Box Shadow Generator

Shadow Properties

Creates an inner shadow instead of outer

Presets

CSS Code

box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Multi-Browser Support:

-webkit-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);

Live Preview

Box Shadow

Common Use Cases

Button

Card

Card Title

This is a card with your custom shadow.

Image

Property Explanation

Horizontal Offset

Moves shadow left (negative) or right (positive)

Vertical Offset

Moves shadow up (negative) or down (positive)

Blur Radius

How soft/blurry the shadow is (0 = sharp)

Spread Radius

Expands (positive) or contracts (negative) shadow size

Color & Opacity

Color and transparency of the shadow

Inset

Makes shadow appear inside the element

About CSS Box Shadow

CSS box-shadow adds depth and dimension to elements on your webpage. Create subtle shadows for cards, dramatic shadows for floating elements, or inset shadows for pressed effects.

Syntax:

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

Common Use Cases:

  • Cards and panels for depth perception
  • Buttons to indicate clickability
  • Images and media for visual separation
  • Modals and popups for layering
  • Navigation bars for elevation
  • Form inputs for inset effects

Design Tips:

  • Use subtle shadows (low opacity) for modern, clean designs
  • Vertical offset should usually be larger than horizontal
  • Higher blur radius creates softer, more realistic shadows
  • Match shadow color to background or use neutral grays/blacks
  • Avoid excessive spread - it can look artificial
  • Layer multiple shadows for complex effects

Multiple Shadows:

You can stack multiple box-shadows by separating them with commas:

box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);

Performance:

  • Box-shadow is GPU-accelerated in modern browsers
  • Multiple shadows can impact performance on complex pages
  • Consider using transforms for animations instead of animating box-shadow

Related Tools

Explore more tools that might help you

Fake Data Generator

Generate fake test data

Try it now

Password Generator

Generate secure passwords

Try it now

Color Palette

Generate color palettes

Try it now

Favicon Generator

Create favicons

Try it now

Placeholder Image

Generate placeholder images

Try it now

Gradient Generator

Create CSS gradients

Try it now