Tailwind Shadow Generator
Build a layered shadow visually, get a Tailwind shadow-[...] arbitrary-value
class plus the raw CSS.
How it works
Each layer's offset-x, offset-y, blur, spread, color, and inset toggle assembles into one
box-shadow segment, and multiple layers are comma-joined, the standard CSS
multi-shadow syntax. For the Tailwind class, that same value gets its spaces swapped for
underscores and commas kept as-is (Tailwind's arbitrary-value parser expects
shadow-[0_4px_6px_rgba(0,0,0,0.1)] style), then wrapped in
shadow-[...]. The preview box's actual box-shadow style is set
to the raw CSS version, so what you see matches both outputs exactly.
Everything is computed in this page's JavaScript against the values you set. Nothing is uploaded.
Common questions
How does an arbitrary-value shadow class work in Tailwind?
Tailwind lets you write shadow-[<any-css-value>] and it compiles straight through to box-shadow: <any-css-value>, no config file changes needed. Spaces inside the value need to become underscores, which this tool handles for you automatically.
Can I stack multiple shadow layers?
Yes, click "Add layer" to add another shadow on top. Real box-shadow supports comma-separated layers, and this tool builds the arbitrary-value class the same way, joining layers with commas.
Is this sent anywhere?
No, the shadow is built and previewed entirely in your browser's CSS engine. Nothing is uploaded.