Design a custom shadow with offset, blur, spread, color and opacity sliders — exported as a Tailwind arbitrary class, a named v4 @theme or v3 config token, or plain CSS.
Settings
Generated locally in your browser — your settings and results never leave this page.
Beyond shadow-md
The built-in shadow scale covers generic elevation; brand glows, tinted shadows and precise offsets need custom values. Design the shadow with sliders — offset, blur, spread, color, opacity, inset — then choose the form it ships in: a one-off arbitrary class, or a named token (shadow-brand) registered in v4 @theme or v3 config.
Worked example
<!-- one-off -->
<div class="shadow-[0px_10px_25px_-5px_rgb(15_23_42_/_0.2)]"></div>
/* named token (v4) */
@theme {
--shadow-brand: 0px 0px 30px 2px rgb(99 102 241 / 0.45);
}
<div class="shadow-brand"></div>When each form fits
- Arbitrary class: prototyping, one component, one place.
- Named token: any shadow used twice — one definition, theme-consistent, readable markup.
Design guidance baked into the presets
- Soft card, floating panel, brand glow and pressed-inset presets encode the ratios that look right: low opacity, y > x, blur ≈ 2× offset, slight negative spread.
Limitations
- Single-layer shadows only — the layered-falloff technique lives in the CSS Box Shadow Generator, whose output also works as an arbitrary value here.
How to use the Tailwind Box Shadow Generator
- Tune offset, blur, spread, color and opacity — tick inset for inner shadows.
- Check the live card preview.
- Pick the output: one-off arbitrary class, or a named token for v4 @theme / v3 config.
Frequently asked questions
Arbitrary class or named token — which should I use?
One-off shadow: the arbitrary class. A shadow used across the UI: register it as shadow-brand — same value, cleaner markup, one place to change. The generator emits both from the same sliders.
Why do the underscores appear in the arbitrary class?
Spaces are not allowed inside class names, so Tailwind's arbitrary-value syntax uses underscores where the CSS has spaces — the generator encodes that automatically.
What makes a shadow look good?
Low opacity (15–30%), y-offset larger than x, blur about twice the offset, slight negative spread. The presets encode these ratios; colored glows break the rules on purpose.
