Build box-shadow and text-shadow with sliders and live preview — including inset boxes, spread, and optional
second text layer. Copy rgba() output that matches modern browsers. Everything runs locally; nothing is uploaded.
Adjust sliders to see box-shadow.
The quick brown fox
Used for the main box or first text layer. Layer 2 uses its own color below when enabled.
box-shadow paints a shadow around an element’s border box — useful for cards, buttons, and elevation. You can set horizontal and vertical offset, blur radius, optional spread, color,
and the inset keyword for inner shadows. text-shadow applies a shadow to glyph outlines; it does not include spread, and multiple comma‑separated shadows stack for glow
and outline effects.
box-shadow follows the element’s rectangular box (respecting border-radius). The filter: drop-shadow() function follows the alpha shape of the content — better
for irregular PNG/SVG silhouettes. This generator targets standard box-shadow and text-shadow only.
Shadows are often semi‑transparent black or tinted color. This tool outputs rgba() from your chosen color and opacity so you can paste values that match design tools and avoid washed‑out
hex hacks.
Multiple box-shadow layers (comma‑separated) are valid but can increase paint cost on large, animating surfaces. Prefer a small number of well‑chosen layers; profile on low‑end devices when
animating shadows.
No. All sliders and previews run in your browser. Nothing is sent to our servers when you copy CSS.
This page edits a single box-shadow for clarity. For multiple layers, copy one result, then append comma‑separated shadows in your CSS (first layer paints on top).
Inset shadows appear inside the border box. If the element has no padding or visible background, the effect can be subtle. Try a contrasting background or increase blur and spread slightly.
The CSS text-shadow syntax has no spread radius (unlike box-shadow). Faking a thick outline requires multiple layered shadows or other techniques such as
-webkit-text-stroke — not generated here.
Generally yes for standard syntax. Subpixel rounding, font rasterization, and subpixel antialiasing can make text-shadow differ slightly. Always check critical designs in your target browsers.
Animating shadow blur and offset can be expensive. Alternatives include animating opacity on a pseudo‑element shadow layer or using transform for lift — profile before shipping.
Decorative shadows are not a substitute for visible :focus-visible styles. Keep keyboard focus indicators per WCAG; use shadows as enhancement, not the only focus cue.
Many browsers omit or simplify shadows in print. Do not rely on shadow for essential contrast in printed documents; set explicit colors and borders for print stylesheets if needed.
No. Use it for quick experiments. Production products should document elevation levels, tokens, and tested shadow recipes in one place for consistency.