CSS Box Shadow Generator
Multi-layer box-shadow builder with inset support and live preview.
Written by Golam Rabbani, Founder & Lead Engineer
How to use this css box shadow generator
- Use the Layer tabs to switch between shadow layers; press "+ Add layer" to stack a new one.
- For the active layer set X/Y offset, blur, and spread in pixels, plus a color (hex or rgba for alpha).
- Tick "Inset shadow" to flip the layer into an inner shadow.
- Pick a box color and backdrop color so you can see contrast against light and dark surfaces.
- Press Generate CSS, then Copy CSS to grab the comma-joined `box-shadow` declaration.
About this css box shadow generator
The CSS box-shadow generator lets you compose one or more shadow layers and emits a single CSS declaration of the form `box-shadow: x y blur spread color, x y blur spread color, …;`. Each layer keeps its own X/Y offset, blur radius, spread radius, color, and an optional `inset` flag that flips the shadow inward. A live preview shows the box against the backdrop so the tool stays the LCP element and you can judge contrast before copying.
Worked example: keep Layer 1 with x=4, y=8, blur=16, spread=0, color=#00000040 (a soft outer shadow), then add Layer 2 with x=0, y=24, blur=48, spread=-12, color=#6366f140 (a far, large purple glow). The tool emits `box-shadow: 4px 8px 16px 0px #00000040, 0px 24px 48px -12px #6366f140;` — the layered look used by modern card UI. Toggle inset on a third layer to add an inner highlight like `inset 0px 1px 0px 0px #ffffff80`. Use rgba() in any color field for fine alpha control. Everything runs in your browser.
FAQ
- What does each value in `box-shadow` mean?
- The four numbers are offset-x, offset-y, blur-radius, spread-radius (in that order). offset-x and offset-y move the shadow; blur softens its edges; spread grows (positive) or shrinks (negative) the shadow before the blur is applied.
- What is the difference between blur and spread?
- Spread is a hard expansion or contraction of the shadow’s rectangle before any blur. Blur then softens that rectangle outward. A negative spread is the standard trick to make a shadow appear tighter under a card.
- When should I use inset?
- Inset turns the shadow into an inner shadow — drawn inside the element instead of outside. It is used for pressed-button effects, well/inset panels, and faked inner glows.
- How do I add transparency?
- Use an 8-digit hex like `#00000040` (the last two hex digits are alpha) or an `rgba(0, 0, 0, 0.25)` value. Either works in the color field.
- Can I stack multiple shadows?
- Yes — that is exactly what layers do. The output is comma-joined, e.g. `box-shadow: a, b, c;`. Later layers paint on top of earlier ones in the preview.