Box Shadow Generator

CSS box-shadow is a property that adds shadow effects around an element's frame. You can set multiple values including horizontal and vertical offsets, blur radius, spread radius, and color. It is commonly used to create depth, layering effects, and visual emphasis on cards, buttons, and other UI elements.

The box-shadow property takes up to six values: horizontal offset (positive = right), vertical offset (positive = down), blur radius (higher = more blurred), spread radius (positive = larger shadow, negative = smaller), color (including opacity), and an optional "inset" keyword for inner shadows.

Yes, CSS supports multiple box shadows on a single element. Separate each shadow with a comma. This tool lets you add and configure multiple shadows independently, which is useful for creating layered depth effects, glowing borders, or complex lighting simulations.

Box-shadow applies a rectangular shadow to an element's box model (including border-radius), while drop-shadow is a CSS filter that follows the actual visible shape of the element, including transparent areas in images. Box-shadow is more commonly used and supports spread and inset, which drop-shadow does not.

To create an inner shadow, add the "inset" keyword to the box-shadow declaration. In this tool, check the "Inset" checkbox for any shadow layer. Inset shadows appear inside the element instead of outside, and are commonly used for pressed button effects or recessed input fields.