CSS Box Shadow Generator

As many as you need. CSS box-shadow accepts a comma-separated list of shadow values. Multiple layers let you combine a tight dark shadow for depth with a wider, lighter shadow for ambient light — the technique used in Material Design and other modern design systems. Each layer in this tool has independent offset, blur, spread, color, and inset settings.

Inset flips the shadow to render inside the element instead of outside. Without inset, the shadow appears behind/around the element giving a raised or floating appearance. With inset, the shadow appears inside the element giving a pressed, recessed, or neumorphic appearance. Useful for input fields that look "sunken" or buttons that look pressed when active.

Solid colors like #000000 look harsh against any non-white background. Semi-transparent colors like "rgba(0, 0, 0, 0.15)" blend naturally with whatever is behind them. This makes your shadows look realistic on any background color. Most UI shadows use black with 10-25% opacity. The color picker in this tool supports rgba values.

Subtle: a barely-there shadow for cards. Medium: a standard card elevation shadow. Strong: a deeper shadow for modals or overlays. Floating: a high offset shadow that makes elements appear to float. Inset: an inner shadow for pressed-state buttons or input fields. Layered: two combined shadows for a realistic multi-depth effect.

Neumorphism uses two shadows: one slightly lighter than the background (simulating a light source) and one slightly darker (simulating shade). Example: "box-shadow: 6px 6px 12px #b8b9be, -6px -6px 12px #ffffff" on a light gray background. Enable two layers in this tool, set opposite X/Y directions, and use light/dark variants of your background color.

No. Unlike outline or border, box-shadow does not affect the element's dimensions or layout flow. The shadow is rendered outside (or inside with inset) the box model without pushing other elements. This means you can add or remove box-shadow freely without causing layout shifts. Spread values also do not add to the element's computed width or height.

No. All CSS generation runs locally in your browser. Nothing is uploaded or stored.