Overview
A layered box-shadow builder: up to five stacked shadows per element, each with its own offset, blur, spread, colour, opacity, and inset flag — with a live preview card, a light/dark canvas, and one-click CSS, Tailwind, and React outputs.
How It Works
Adjust the sliders for the active layer — X and Y offset (±80px), blur (0–100px), spread (−40 to 60px), a colour picker, and opacity as a percentage — or start from one of seven presets such as Subtle Card, Layered 3D, Floating Pop, or Neon Cyan. Add Layer stacks up to five shadows, and the preview card shows the composite against a light or dark canvas.
Step-by-Step Usage Guide
- Pick a preset or start from the default two layers.
- Tune the active layer's sliders; select a different layer to edit another one.
- Toggle Inset for inner shadows, and add layers up to five for depth.
- Switch the canvas to dark to sanity-check the shadow, then copy the format you need.
Technical Specifications & Standards
Opacity is implemented the way CSS composites it: the hex colour and the opacity slider combine into an rgba() value per layer, so stacked shadows blend realistically. The output is one comma-separated box-shadow declaration in three dialects — plain CSS (box-shadow: …), a Tailwind arbitrary-value class with spaces replaced by underscores, and a React inline-style object. The Inset toggle is per layer, so inner and outer shadows can be combined on one element.
Targeted Use Cases
- Designing card elevations for a design system, from subtle to floating.
- Producing the exact Tailwind arbitrary class for a one-off component.
- Creating a React inline-style shadow for a component library prop.
- Reproducing a glow effect (neon and purple presets) for dark dashboards.
Notes & Gotchas
- Layer offsets are sliders only — there are no numeric inputs, so pixel-exact values from a mock take a little patience.
- The Tailwind output is an arbitrary-value class with underscores for spaces. If your project escapes differently, take the CSS output and convert.
- Layers cannot be reordered, only deleted and re-added — plan the stack bottom-up: ambient shadow first, key light last.
- Check the composite on both canvas colours; a shadow tuned on light grey can vanish or crush on dark surfaces.
Frequently Asked Questions
How many shadows can I stack?
Five layers maximum (one minimum). Each layer contributes one comma-separated entry to the final box-shadow value.
Does opacity change the colour or use rgba?
It converts your hex to rgba() with the chosen alpha — exactly how CSS composites a shadow.
Can I make a text-shadow or drop-shadow filter?
No. The tool emits box-shadow only; text-shadow and filter: drop-shadow() are different properties.
Which formats can I copy?
Plain CSS, a Tailwind arbitrary-value class, and a React inline-style object.