Shadow depth on a card communicates elevation, the visual cue for how far above the underlying page surface that card appears to float.
Loading Shadow Effect Builder…
Visual card shadow builder with elevation presets
Live preview on a card component with body text
Supports multiple shadow layers for natural depth
Exports ready-to-use box-shadow CSS declarations
Drop the Shadow Effect Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/shadow-effect-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Shadow Effect Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
In Material Design and most surface-based design systems used in modern web product work, shadow depth functions as the primary visual cue for elevation hierarchy. A card resting at 1dp elevation sits close to the page surface and uses a subtle shadow of roughly 2 pixel vertical offset and 4 pixel blur radius. A card at 4dp elevation, such as a hovered card lifted in a grid, uses a 4 pixel offset and 8 pixel blur. A modal dialog at 8dp uses an 8 pixel offset and 16 pixel blur. At 16dp elevation, suitable for a drawer or full-height navigation panel, the shadow reaches 16 pixel offset and 32 pixel blur. These values approximately double both the offset and blur with each elevation step, creating a perceptually consistent scale where each elevation level reads as clearly distinct from the one above and below it without requiring viewers to interpret absolute pixel values.
Choosing the right shadow colour is as important as choosing the right offset and blur values for the perceived quality of the final result. Pure black shadows at any opacity produce a result that reads as harsh and visually heavy, particularly on non-white backgrounds where the dark shadow competes with the background tone for attention. Modern design systems from Google Material to Tailwind UI to Shopify Polaris frequently use the element's brand colour or a dark variant of the surface colour at low opacity for shadows. For example, box-shadow: 0 4px 8px rgba(0,80,160,0.12) on a blue-accented card creates a shadow that feels visually integrated with the card colour itself rather than reading as a generic black haze applied underneath. This colour-matching technique makes the shadow appear to emanate from the card itself rather than from a foreign light source unrelated to the rest of the design.
Card hover and interactive states require a clearly distinct shadow treatment from the resting state to communicate interactivity effectively. A common production pattern uses 0 2px 6px rgba(0,0,0,0.1) at rest and transitions to 0 8px 20px rgba(0,0,0,0.15) on hover. The visible jump in offset and blur makes the card lift noticeably on hover, communicating clickability before the user invokes any interaction. Combining this shadow change with a transform: translateY(-2px) on hover reinforces the lift effect spatially by physically moving the card upward at the same time the shadow deepens. Always use transition: box-shadow 0.2s ease, transform 0.2s ease to animate both properties together with matching duration and easing, keeping the motion coherent rather than letting one property finish before the other.
Modal shadows deserve a different treatment from card shadows because modals exist at a higher elevation tier and need to read as substantially separated from the underlying content. A modal shadow should use offset and blur values three to five times larger than the resting card shadow in the same interface, establishing immediate visual hierarchy. Pair the heavy modal shadow with a backdrop overlay that dims the underlying content to approximately 50 percent opacity black, which combines with the shadow to create the impression of the modal floating well above the page. Without both the heavy shadow and the backdrop overlay, the modal can blend into the cards beneath it, breaking the spatial relationship users expect from elevated dialog content. The same logic applies to drawers and side panels, which often sit one tier above modals.
A card shadow should also be considered alongside the card's background colour, border treatment, and corner radius rather than tuned in isolation. A card with a 1px hairline border and a tight low-blur shadow reads as a precise, document-style surface that works well in productivity tools and data tables. A card with no border and a wider diffused shadow reads as a softer, more product-marketing surface common in landing pages and onboarding flows. The two looks are not interchangeable, and the shadow values that work for one feel out of place applied to the other. Always design the card surface as a complete system, where shadow, border, radius, and background tone reinforce a single intended character rather than fighting each other for the viewer's attention.
Select an elevation level preset (resting, hover, modal) or set custom offset and blur values. Add a second shadow layer for a more natural two-component depth effect. Copy the CSS when the card shadow matches your elevation scale.
Step-by-step guide to css card shadow generator:
Choose an elevation level or enter custom values
Select a preset elevation tier such as resting, hover, or modal level, or enter specific offset, blur, and spread values that match the elevation scale defined in your design system. Picking a preset first gives you a sensible starting point that you can fine-tune from, rather than starting from a blank slate where every value has to be guessed and then iteratively corrected.
Add a second shadow layer for natural depth
Click the Add Layer control to introduce a second shadow with a smaller offset, lower blur, and reduced opacity. This two-component shadow looks more physically accurate than any single layer because it mirrors the close contact shadow and wider ambient shadow that real objects always cast simultaneously under any normal lighting condition. The combined layers feel grounded rather than floating awkwardly.
Select shadow colour
Choose a shadow colour using either rgba black for a neutral elevation cue or a dark tint of your card's brand colour for a more integrated look in branded interfaces. Adjust opacity to roughly 0.10 to 0.18 on white backgrounds and slightly higher on light grey backgrounds where the contrast against the underlying surface is naturally lower than on a pure white sheet.
Copy the CSS and apply to your card component
Click Copy CSS to copy the full box-shadow declaration to your clipboard, then paste it into your card component's resting state rule. Duplicate the variant builder steps for the hover and active states and paste those values into the corresponding pseudo-class rules so each interaction tier reads with a clear and intentional shadow change.
Common situations where this approach makes a real difference:
Product card grid on an e-commerce site
A front-end developer builds a product card grid where each card lifts noticeably on hover to signal that the entire surface is clickable. Resting cards use box-shadow: 0 1px 4px rgba(0,0,0,0.08), 0 2px 8px rgba(0,0,0,0.05) for a low-key initial elevation that does not compete with the product imagery inside each card. On hover the shadow deepens to 0 8px 24px rgba(0,0,0,0.12) and the card simultaneously translates upward 3 pixels. The transition confirms clickability and gives the grid a polished, spatial quality that flat alternatives cannot match.
Dashboard widget cards with elevation hierarchy
A SaaS dashboard designer establishes three explicit elevation tiers for an analytics product: background cards at 0 1px 3px rgba(0,0,0,0.06), primary content cards at 0 2px 8px rgba(0,0,0,0.1), and featured metric cards at 0 4px 16px rgba(0,0,0,0.14). These three discrete levels create a clear spatial hierarchy across the dashboard, guiding the user's eye toward the most important key performance metrics without relying solely on colour weighting or font size for visual emphasis. The tier system also scales cleanly when new card types are introduced later.
Confirmation modal with layered shadow
A developer builds a confirmation dialog that appears above a backdrop overlay dimming the underlying page content. The modal uses box-shadow: 0 16px 48px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15) to create a heavy, spatially elevated shadow that clearly distinguishes the modal from the dimmed content behind it without relying solely on the backdrop colour for contrast. The two-layer shadow adds realism to the floating panel effect because the close component anchors the modal physically while the wider ambient layer establishes the surrounding glow, together producing the convincing impression of a dialog suspended well above the page.
Blog post preview card with brand-coloured shadow
A content site designer uses brand-coloured shadows across all post preview cards on the editorial homepage and category pages. Each card uses box-shadow: 0 4px 12px rgba(99,60,180,0.12), reflecting the publication's deep purple brand colour rather than a generic neutral black. The subtle tint in the shadow integrates the card depth with the brand identity at every level of the layout, making the shadow feel deliberately designed rather than a default black-haze treatment that could belong to any site. The choice reinforces the brand without adding any extra borders or background colours that would compete with the article previews.
Use this when building card components, modals, panels, or any surface-based UI element that needs to communicate its elevation level through shadow depth.
Get better results with these expert suggestions:
Use brand-coloured shadows for design cohesion
Instead of pure black shadows at low opacity, use a dark tint of your primary brand colour as the shadow base. A card with box-shadow: 0 4px 12px rgba(37,99,235,0.15) on a blue-branded interface looks like the shadow belongs to the card rather than being a generic dark layer underneath it. The colour echo ties the elevation to the surrounding palette and removes the slightly muddy appearance that pure black shadows can create on saturated or off-white backgrounds, which becomes especially noticeable in branded product walls.
Scale shadow with card size
A large 400px-wide hero card can carry a 12 to 16 pixel blur without looking excessive, while a small 150px utility card should stay closer to 4 to 6 pixels of blur. Keeping shadow scale proportional to card dimensions maintains perceptual consistency, so every card appears to float at the same apparent height despite having different absolute pixel values. Without this proportional adjustment, small cards feel hazy and out of focus while large cards look like they barely lift off the surface at all.
Differentiate modal shadow from card shadow explicitly
A modal dialog should carry a visibly heavier shadow than any card in the background grid, establishing a clear depth hierarchy that the eye reads immediately. If your resting cards use 0 4px 12px, modals should use 0 16px 40px or stronger to keep the spatial gap obvious. Without this explicit distinction the modal does not clearly sit above the card layer, and users can lose track of which surface is currently focused, particularly when modal dimensions overlap nearby card boundaries on smaller screens.
Use will-change: box-shadow sparingly on hover-animated cards
Adding will-change: box-shadow to cards that animate on hover tells the browser to pre-composite those elements on a separate GPU layer ahead of time, reducing jank during the shadow transition by avoiding a costly layer promotion mid-animation. Only add this hint to cards that are explicitly interactive and animated on hover or focus. Applying will-change globally to every card on the page wastes GPU memory and can actually degrade overall scroll performance, particularly on low-end Android devices with constrained graphics memory budgets.
Define elevation as a scale, not individual values
Create CSS custom properties like --shadow-1, --shadow-2, --shadow-3 for your elevation levels rather than writing raw values on each component. Updating one variable updates every component at that elevation level simultaneously.
Use two shadows for natural card depth
Real objects cast two shadows: a close contact shadow and a diffused ambient shadow. Combining box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.08) on a card produces a more natural result than a single shadow layer.
Animate shadow on hover with translateY
Pair shadow depth increase on hover with a small translateY(-2px) to physically lift the card. The combination of upward movement and deeper shadow is more convincing than a shadow change alone.
More use-case guides for the same tool:
Open the full Shadow Effect Builder — free, no account needed, works on any device.
Open Shadow Effect Builder →Free · No account needed · Works on any device