smooth-shadows

name

smooth-shadows

description

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.

Smooth Shadows

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).

Quick Start

/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).

Parameters (match the original UI)

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