From dedene-skills
Generate smooth, multi-layer box-shadow CSS that faithfully recreates the classic shadows.brumm.af / Tobias Ahlin layered technique. Use when you need soft, realistic elevation for cards, buttons, modals, overlays, or any UI element instead of a single harsh shadow. Supports the original controls: style (soft/sharp/linear), number of layers, vertical & horizontal distance, blur, base opacity, and shadow color. Produces ready-to-paste CSS or Tailwind arbitrary values.
How this skill is triggered — by the user, by Claude, or both
Slash command
/dedene-skills:smooth-shadowsThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Generate production-quality **layered smooth box-shadows** that look like the beloved (now offline) `shadows.brumm.af` tool and the current `smoothshadows.com` successor.
Generate production-quality layered smooth box-shadows that look like the beloved (now offline) shadows.brumm.af tool and the current smoothshadows.com successor.
This skill implements the technique from Tobias Ahlin's canonical article and gives agents the same parameters the original UI exposed (Style, Opacity, Blur, Layered shadows count, Vertical/Horizontal distance, Colors).
/smooth-shadows soft lift on a dashboard card, vertical 32px, 5 layers, blur around 24
/smooth-shadows --style sharp --layers 4 --vertical 16 --output css
Natural language or explicit flags both work.
The skill will return the full box-shadow value (and usually a Tailwind version too).
| Control | Flag / Param | Default | Notes |
|---|---|---|---|
| Style | --style | soft | soft (gentle, larger blur), sharp (crisper, stronger inner layers), linear (even steps) |
| Layered shadows | --layers, -l | 5 | 3–6 is the sweet spot for most UIs. More = softer spread but can get muddy. |
| Vertical distance | --vertical, -v | 32 | The "lift" / main y offset of the largest layer (px). |
| Horizontal | --horizontal, --h-dist | 0 | Side offset (rarely needed, but supported). |
| Blur | --blur | 24 | Base/max blur radius. The generator scales it across layers. |
| Opacity | --opacity | 0.08 | Base alpha for the shadow color (very low = modern & subtle). |
| Color | --color | #030712 | Any hex. The same color is used for every layer with varying alpha. |
| Output | --output | raw | raw (just the value), css (full box-shadow: ...;), tailwind (arbitrary shadow-[...]). |
| Dark mode | --dark | false | Boosts opacity for dark surfaces (or use a lighter color). |
Understand the request
Extract (or ask for) the visual intent: how "lifted" does it feel? Soft & dreamy, crisp & defined, or even linear? Any dark mode context?
Choose good defaults or map the request
Generate (preferred: use the deterministic script)
Call the bundled script for pixel-perfect, repeatable output instead of the model inventing numbers.
Present & refine
Return:
box-shadow value<div style="box-shadow: ..."> or CSS rule snippetOffer variations
"Want a slightly more dramatic version? I can give you vertical 48 / 6 layers."
"Dark surface? I can regenerate with --dark."
scripts/generate-smooth-shadow.jsThe single source of truth for the layer math. Run it directly for perfect reproducibility.
From inside the installed skill (recommended form):
node <this-skill-dir>/scripts/generate-smooth-shadow.js --vertical 32 --layers 5 --style soft --opacity 0.08 --blur 24 --color '#030712'
node <this-skill-dir>/scripts/generate-smooth-shadow.js -v 16 -l 3 --style sharp --output css
node <this-skill-dir>/scripts/generate-smooth-shadow.js --vertical 40 --layers 6 --style linear --dark --output tailwind
Full help:
node <this-skill-dir>/scripts/generate-smooth-shadow.js --help
The script also exports generateSmoothShadow(params) so an agent that has located the skill directory can require() it programmatically if desired.
Resolve script paths relative to this skill directory when installed.
references/algorithm.md — The Tobias Ahlin technique, how the three styles map to alpha & blur curves, and the concrete examples the generator is based on.references/examples.md — Ready-to-copy box-shadow declarations for common UI patterns (with the exact params that produced them).DROP_SHADOW effects on a node (see figma-use effect-style patterns for the API shape). The skill can also just emit the numbers for you to apply manually.Reduce --layers to 3–4 or lower --opacity. The classic look uses surprisingly low opacity spread across several layers.
Add --dark (the script increases opacity). You can also pass a lighter color (e.g. a soft warm gray) for a different aesthetic.
The generator targets the visual character of the original tool using the public algorithm. Small differences in the exact easing curve are normal; the result will still look smooth and professional. Tweak vertical/blur/layers by hand if you need pixel-perfect parity with a specific screenshot.
Run the generator several times with increasing --vertical values (e.g. 4, 8, 16, 32, 48) and the same style. Or ask the skill: "give me a 6-step smooth shadow elevation scale".
The arbitrary value is intentionally ugly in source but produces the correct runtime shadow. Extract it to a component or @layer utilities if you will reuse it often.
Single box-shadow values almost always look cheap or "computer-y". Layering several shadows with carefully increasing offset + blur (and controlled alpha) is one of the highest-leverage micro-details in UI craft. This skill makes that technique trivial and repeatable for agents.
Credit: technique by Tobias Ahlin, original generator by Philipp Brumm, current web UI at smoothshadows.com.
Guides creation, editing, and verification of skills for AI coding agents using test-driven development with subagent scenarios. Use when authoring or debugging skills.
npx claudepluginhub dedene/skills --plugin ultracode