CSS Shadow Preview
Preview and copy layered text and box shadows.
About the CSS Shadow Preview
The CSS Box-Shadow Preview tool lets you dial in a box-shadow declaration interactively and copy the exact CSS to your clipboard. Adjust offset X/Y, blur radius, spread radius, color, inset mode, and the box background color — the live preview updates instantly, and the matching box-shadow: ... declaration is shown with copy buttons for both single-line and multi-line CSS formatting.
Box shadows are one of the most finicky CSS properties to get right by hand. The five-value syntax offset-x offset-y blur spread color is easy to mistype, and small changes to blur or spread can dramatically affect the visual result. Most developers resort to trial and error — tweaking values in devtools, copying back to their editor, and repeating. This tool collapses that loop into a single screen.
The preview shows a real DOM element with the shadow applied, so what you see is exactly what your browser will render in production. Inset shadows (which render inside the element's padding box) are toggled with a checkbox. Negative spread values (which contract the shadow inward) and large blur values (which soften the shadow edges) are fully supported.
How It Works
The CSS box-shadow property accepts up to six values per shadow: offset-x offset-y blur-radius spread-radius color, optionally prefixed with the inset keyword. Multiple shadows can be chained with commas. This tool generates a single shadow, but you can paste the output multiple times with different values to compose multi-shadow effects.
Offset-x and offset-y move the shadow relative to the element. Positive Y values push the shadow down (mimicking a light source from above), positive X values push it right. Most natural-looking shadows use a small positive Y (4-12px) and zero or near-zero X. Blur radius softens the shadow's edge; values below 4px produce hard-edged shadows reminiscent of Material Design elevation, while 20-40px produces soft, diffused shadows. Spread radius expands (positive) or contracts (negative) the shadow uniformly; negative spread combined with large blur produces the popular “tight glow” effect.
The color value can be any valid CSS color: HEX (#0A4F3A), RGB (rgb(10,79,58)), RGBA (rgba(10,79,58,0.3)), or HSL. For natural shadows, designers typically use a low-alpha black (rgba(0,0,0,0.15)) or a low-alpha tint of the brand color so the shadow harmonizes with the design rather than fighting it.
The inset keyword flips the shadow to render inside the element's padding box — useful for pressed-button effects, sunken input fields, and inset borders. The preview uses a real DOM element with the exact shadow value applied, so rendering matches production exactly across all modern browsers.
Worked Examples
The default values produce a soft, natural elevation shadow: 0px 10px 20px -5px rgba(10,79,58,0.30). This is the kind of shadow used by Stripe, Linear, and other modern SaaS interfaces — a tight, slightly green-tinted glow under the card that suggests gentle ambient lighting without screaming “Material Design.”
For a Material Design elevation effect, try offset 0, blur 8, spread 0, color rgba(0,0,0,0.18) with no inset. The result is the classic small-but-present shadow Google's Material guidelines specify for raised cards and FABs.
For a long, dramatic shadow that suggests a low sun, use offset X 0, offset Y 30, blur 60, spread -10, color rgba(10,79,58,0.4). The negative spread prevents the shadow from overwhelming the element, while the large blur and offset create a long, soft cast.
For an inset shadow that mimics a pressed button, check the inset box and use offset 0, blur 4, spread 0, color rgba(0,0,0,0.15). The result is the subtle inner shadow thatiOS buttons use in their highlighted/active state.
When to Use This Tool
- Dialing in elevation shadows for cards, modals, and dropdowns without trial-and-error in devtools.
- Creating pressed-button effects with inset shadows for active/hover states.
- Generating brand-tinted shadows (e.g., a forest-green-tinted glow under a green primary button) instead of pure black.
- Prototyping multi-layer shadows for a “floating card” effect before committing to a CSS variable.
- Designing focus rings using inset shadows that don't shift layout (unlike outlines).
- Building neumorphism-style soft UI with paired light and dark shadows.
- Generating shadow CSS for Figma exports that lack shadow specifications.
Limitations & Disclaimer
This tool generates a single box-shadow declaration. It does not support filter: drop-shadow(), multi-shadow composition, or animated transitions between shadow values. The preview uses a square card with default border-radius; your actual element's radius, padding, and surrounding background will affect how the shadow renders in production. The color field accepts free-text input, so invalid CSS color values will produce a broken shadow with no warning — verify with your browser's devtools if the preview looks wrong. The copy buttons use the Clipboard API, which requires a secure (HTTPS) context. See our disclaimer for full terms.
Frequently Asked Questions
Can I generate multiple shadows at once?
Not directly. Compose multi-shadow effects by generating each shadow separately, then concatenating the outputs comma-separated in your CSS. For example: <code>box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 10px 20px rgba(0,0,0,0.15);</code>
Why does my shadow look different in production?
Browser rendering should be identical, but the visual feel of a shadow depends on the surrounding background, the element's border-radius, and adjacent elements. Test in context. A shadow that looks great against white may look weak against a busy gradient.
Does this tool support filter: drop-shadow?
No. <code>filter: drop-shadow()</code> follows a similar syntax but applies to the alpha channel of the entire element (including transparent areas). Use it for PNGs with transparency. This tool focuses on <code>box-shadow</code>, which renders around the element's box only.
Can I use HSL or named colors?
Yes. The color field accepts any valid CSS color: HEX, RGB, RGBA, HSL, HSLA, or named colors like <code>rebeccapurple</code>. The output preserves whatever you enter. For natural shadows, RGBA with low alpha is recommended.
What's the difference between blur and spread?
Blur softens the shadow's edge (high values = softer, more diffuse). Spread expands or contracts the shadow's size uniformly (positive = larger, negative = smaller). A negative spread with high blur produces the popular “tight glow” effect that hugs the element closely.
Is the multi-line CSS easier to read?
Yes, especially for complex shadows. The multi-line format puts each value on its own line, making it easier to scan and modify. Many design system codebases prefer multi-line for shadow variables precisely because it's easier to maintain.
Last updated: July 21, 2026 · Author: HT99 Tools Editorial Team · Reviewed by: HT99 Tools Editorial Team