Skip to main content

CSS Box Shadow Generator

Create beautiful CSS box shadows with multiple layers and live preview.

CSS Box Shadow Generator

Create CSS box shadows with multiple layers and live preview

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

FAQ

What is box-shadow in CSS?

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas.

What do the box-shadow values mean?

The values are: offset-x, offset-y, blur-radius, spread-radius, and color. Optional "inset" keyword creates an inner shadow.

Can I have multiple shadows?

Yes! You can layer multiple shadows by separating them with commas. This is great for creating depth and elevation effects.