Visual CSS box-shadow generator with real-time preview and code generation. Create beautiful shadow effects for your web elements with adjustable parameters for offset, blur, spread, and color.
Box-shadow is a CSS property that adds shadow effects around an element's frame. It can create depth and visual hierarchy in web design.
Outset shadows (default) appear outside the element, while inset shadows appear inside the element, creating a recessed or sunken effect.
You can add multiple shadows by separating them with commas in CSS: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1);
Horizontal offset moves the shadow left (negative) or right (positive). Vertical offset moves it up (negative) or down (positive).