CSS Box Shadow Generator
Build single and multi-layer box shadows visually. Adjust offsets, blur, spread, color, and opacity — then copy the CSS.
How to Use the Box Shadow Generator
- Choose a mode — Outer for standard drop shadows, Inset for inner shadows, Layered to build up multiple shadows, or Presets for ready-made effects.
- Adjust the sliders — Offset X and Y move the shadow position. Blur controls softness. Spread expands or contracts the shadow size.
- Set the color — pick a shadow color and use the opacity slider to make it transparent. Dark semi-transparent shadows look most natural.
- Add layers in Layered mode to stack multiple shadows for depth and dimension.
- Copy or download the CSS and paste it into your stylesheet.
Understanding CSS box-shadow
The CSS box-shadow property is one of the most versatile styling tools available. It adds shadow effects around an element's frame, creating the illusion of depth and elevation on a flat screen. Unlike images or SVG, box shadows are rendered by the browser at any resolution, scale with the element perfectly, and require zero extra HTTP requests.
The Five Parameters
- offset-x — horizontal shadow position. Positive moves right, negative moves left.
- offset-y — vertical shadow position. Positive moves down, negative moves up.
- blur-radius — shadow sharpness. 0 is a hard edge; higher values produce softer shadows.
- spread-radius — shadow size beyond the element's dimensions. Negative values create a smaller shadow for more realistic lighting.
- color — any valid CSS color. Semi-transparent rgba() colors produce the most natural results.
The Inset Keyword
Adding inset before the offsets flips the shadow to the inside of the element. Inset shadows are used to simulate pressed button states, create inner glow effects, and add subtle depth to input fields. When combined with outer shadows, they can create very convincing neumorphic or embossed effects. Note that inset shadows are clipped to the element's border-box, so they respect the element's border-radius.
Layered Shadows for Depth
Real-world objects cast complex shadows — a small, dark shadow close to the object for contact, and a larger, lighter shadow for ambient light. Material Design formalized this with its elevation system, which uses multiple shadow layers at each depth level. A typical Material card shadow uses two layers: a small, sharp shadow for the key light, and a larger, diffuse shadow for ambient light. This technique produces shadows that look believable at any background color. Use the Layered mode in this generator to experiment with multi-layer compositions.
Popular Shadow Presets Explained
- Material: Two-layer system using very dark rgba shadows — one sharp for direct light, one soft for ambient
- Soft: Large blur, minimal offset, low opacity — used in modern card designs and modals
- Sharp: Zero blur radius — crisp, geometric shadows like print design
- Neon: Colored shadow matching the element's background color — creates a glowing halo effect
- Glassmorphism: Subtle inner glow combined with a soft outer shadow — pairs with backdrop-filter blur
Performance Considerations
Box shadows are GPU-accelerated in modern browsers, but very large or blurry shadows on many elements can still affect rendering performance, especially during animations. If you are animating box shadows, consider using opacity or transform transitions instead, with pseudo-elements that already have the shadow applied. This avoids triggering layout recalculation on each frame. For text elements, use the text-shadow generator instead — it follows the text shape rather than the element box.