Micro Tools
Advertisement

TW shadow builder

Design a box shadow visually, then get both the Tailwind arbitrary-value class and the raw CSS. Tune offset, blur, spread, color and opacity live.

Shadow controls

Design the shadow, get the Tailwind class plus raw CSS.

Preview and code
Shadow
Advertisement

How Tailwind arbitrary values work

Tailwind lets you write one-off utilities in square brackets: shadow-[0px_10px_24px_rgba(0,0,0,0.15)]. Underscores become spaces, so any box-shadow you can write in CSS becomes a utility class without touching your config file.

Shadow anatomy for UI depth

Offset-y pushes the shadow down for a lifted look, blur softens it, spread grows or shrinks it, and low opacity keeps it natural. Material-style elevation mostly varies blur and y-offset; spread near zero keeps shadows photographic rather than graphic.

Related tools

Image compressorShrink images to a target size or quality. Compress to exact KB. HEIC to JPG converterConvert iPhone HEIC photos to JPG, right in your browser. WebP converterConvert WebP to PNG or JPG.

TW Shadow Builder FAQs

Why do underscores appear in the Tailwind class?
Tailwind uses underscores as escaped spaces inside arbitrary values. shadow-[0px_10px_24px_0px_rgba(15,23,42,0.15)] compiles to box-shadow: 0px 10px 24px 0px rgba(15,23,42,0.15). Copy it exactly, underscores included.
Should I use the class or the raw CSS?
Use the Tailwind class if your project runs Tailwind, it keeps styling in the utility workflow. Use the raw CSS in design systems, emails, or any project without Tailwind.
How do I make a colored shadow?
Pick a brand color and keep opacity low, 10 to 20 percent. Colored shadows add glow-like depth to cards and buttons; violet shadows on violet buttons are a popular modern look.
What is the difference between blur and spread?
Blur feathers the shadow edge outward, spread expands or contracts the shadow shape itself. Negative spread tightens the shadow inside the element footprint, which suits subtle inset-free depth.
Can I layer multiple shadows in Tailwind?
Yes, comma-separate two arbitrary shadow classes will not work, but you can put two shadows inside one arbitrary value separated by a comma. Or stack the raw CSS version which naturally supports comma layers.
Advertisement