webdev_box_shadow_generator
Compose multi-layer CSS box-shadow declarations with per-layer offset, blur, spread, color, opacity, and inset settings. Includes HTML preview and CSS, SCSS, Tailwind snippets.
Instructions
CSS Box Shadow Generator. Compose one or more CSS box-shadow layers from per-layer offset, blur, spread, color, opacity, and inset settings, then return the combined box-shadow declaration plus a ready-to-paste HTML preview and CSS, inline, SCSS, and Tailwind usage snippets. Layers are joined in order into a single comma-separated declaration; per-layer opacity below 1 is folded into the color as rgba. Use webdev_border_radius_generator instead for rounded corners, webdev_css_gradient_generator for gradient backgrounds, and webdev_css_filter_generator for blur and brightness filter effects. Runs locally on the input you provide: read-only, non-destructive, contacts no external service, and is rate-limited (60 requests/minute for anonymous callers). Returns the box-shadow CSS string, the rendered preview HTML, the echoed layers, the layer count, and keyed usage examples.
Input Schema
| Name | Required | Description | Default |
|---|---|---|---|
| shadows | Yes | One or more shadow layers, joined left-to-right into one box-shadow declaration. At least one layer is required (empty returns HTTP 400). | |
| previewSettings | No | Optional sizing and colors for the generated preview HTML only; does not affect the CSS declaration. |
Output Schema
| Name | Required | Description | Default |
|---|---|---|---|
| css | No | The combined box-shadow CSS declaration joining all layers, ready to paste into a stylesheet. | |
| previewHtml | No | Self-contained HTML snippet rendering the shadow on a sample element. | |
| usageExamples | No | Keyed copy-ready snippets (css, inline, sass, tailwind); each value has title and code strings. | |
| shadows | No | The echoed shadow layers after normalization. | |
| shadowCount | No | Number of shadow layers in the declaration. |