سازندهٔ Box-Shadow

(مستندات به انگلیسی)

What it does

Designs layered CSS box-shadow values with live preview and copy-ready output. Each layer has the five standard properties - offset X, offset Y, blur, spread, color - plus an inset toggle and a 0-1 opacity slider whose value is composed into an rgba() color at build time. Stack as many layers as you need; they are comma-joined in output order, exactly as CSS expects.

Five one-click presets (Soft, Sharp, Elevated, Inner, Glow) replace the current layers with proven combinations - single-layer defaults plus a two-layer “Elevated” stack. The preview stage renders your shadow on a rounded box whose color you control, over a choice of plain, checker, or split backdrops for judging opacity. 100% client-side.

How to use it

1. Click a preset in the toolbar to start from a known-good shadow, or edit the initial soft layer directly. Reset returns to the default single soft layer.
2. In Stage, pick the preview Backdrop (Plain / Checker / Split) and set the Box color with the swatch picker.
3. For each Layer section, tune the controls:
   • Inset - draw the shadow inside the box instead of outside it.
   • Color - the layer’s base color (swatch picker, hex).
   • Offset X / Offset Y - position in pixels; negatives are valid.
   • Blur - blur radius in pixels (min 0).
   • Spread - expand or contract the shadow; negative values tighten it.
   • Opacity - 0-1 slider, blended into the emitted rgba() color.
4. Click Add layer to stack another shadow (e.g. a tight contact shadow under a wide ambient one). Remove layers with the trash button on each section - the last layer cannot be removed.
5. Watch the live preview update as you edit.
6. Click Copy on the CSS output to grab the finished declaration.

Examples

Verified by running buildBoxShadow() from src/lib/boxShadow.ts on the exact layer values the five presets install:

Soft (also the tool’s initial state)

box-shadow: 0px 10px 20px -4px rgba(0,0,0,0.25);

Elevated - two layers, tight contact + wide ambient:

box-shadow: 0px 1px 2px 0px rgba(0,0,0,0.1), 0px 12px 28px -6px rgba(0,0,0,0.28);

Inner

box-shadow: inset 0px 2px 6px 0px rgba(0,0,0,0.35);

Glow - colored, zero-offset shadow:

box-shadow: 0px 0px 24px 2px rgba(59,130,246,0.45);

Sharp: box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.3);

Good to know

• Private: generation is local; nothing is uploaded.
• Layers are emitted comma-joined in list order - the first layer paints on top in CSS, so order matters visually.
• Opacity is applied per layer via rgba(), so you can mix a heavy black contact shadow with a faint colored glow in one declaration.
• The Split backdrop shows your shadow against both light and dark halves at once - the fastest way to check a shadow that must work on both themes.
• Negative spread (-4px, -6px in the presets) keeps a large blur from spilling past the box edges.
• Related tools: CSS Gradient Generator, Glassmorphism Generator, Color Picker & Converter