Box Shadow Generator

Create beautiful CSS box shadows for your web projects

Configuration

5px
5px
15px
0px
75%

Preview

CSS Code

box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.75);

Understanding CSS Box Shadows

What is a Box Shadow?

A box shadow is a CSS property that allows you to add shadow effects around an element's frame. You can specify multiple effects separated by commas. The box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

Box Shadow Syntax

The basic syntax for the CSS box-shadow property is:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color] [inset];

Parameters Explained

  • Horizontal Offset: Required. The horizontal distance of the shadow. Positive values put the shadow on the right side, negative values put the shadow on the left side.
  • Vertical Offset: Required. The vertical distance of the shadow. Positive values put the shadow below the box, negative values put the shadow above the box.
  • Blur Radius: Optional. The higher the value, the blurrier the shadow will be. If not specified, it will be 0 (sharp shadow).
  • Spread Radius: Optional. Positive values will cause the shadow to expand, negative values will cause the shadow to contract.
  • Color: Optional. The color of the shadow. If not specified, it uses the current text color.
  • Inset: Optional. Changes the shadow from an outer shadow to an inner shadow.

Browser Compatibility

The box-shadow property is supported in all modern browsers, including Chrome, Firefox, Safari, Opera, and Edge. For Internet Explorer, box-shadow is supported in IE9 and later versions.

Tips for Effective Box Shadows

  1. Use subtle shadows for a natural elevation effect
  2. Consider using multiple layered shadows for more depth
  3. Match shadow color with your overall color scheme
  4. Use inset shadows for pressed or embedded effects
  5. Experiment with different blur and spread values for unique effects

Advanced Box Shadow Techniques

You can create multiple shadows by separating them with commas. For example:

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

This technique creates a more natural, layered shadow effect that can give your UI elements greater depth and realism.