What is a box shadow?

A box shadow is a graphical effect that adds a drop shadow to an HTML element, creating depth and visual interest.

How do I use the Box Shadow Generator?

Simply select your desired box shadow type, configure the properties, and export your generated CSS code.

Yes, the Box Shadow Generator is completely free to use, with no limitations or watermarks.

Yes, you can use the Box Shadow Generator for both personal and commercial projects, free of charge.

Generate CSS box-shadow with live visual preview.

Horizontal Offset: 4

Vertical Offset: 4

Blur Radius: 8

Spread Radius: 0

Opacity: 0.3

Color

Inset

Preview

CSS

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

Choose from a variety of box shadow types, including inset, outer, and custom options

Adjust the color, blur, spread, and position of your box shadow to achieve the desired effect

Copy and paste your generated CSS box-shadow code into your project or save it for later use

Generate linear and radial CSS gradients visually.

Generate CSS border-radius visually.

Format and beautify CSS code online.