Loading…
Loading…
Design tool
Tune box-shadow and export CSS.
Box Shadow Generator is a free CSS box-shadow playground on ezToolFlow. Tune offset X/Y, blur, spread, and shadow color with a live card preview, then copy a complete box-shadow: …; declaration into your project.
Soft elevation is a core part of modern UI: cards, modals, dropdowns, and floating action buttons use layered shadows instead of hard borders. box-shadow syntax is easy to mis-tune by hand — too much blur looks muddy, large spreads look like glows, and fully opaque black feels harsh on light surfaces. This generator keeps the preview honest while you move each parameter.
How to paste the CSS: the tool copies box-shadow: <x>px <y>px <blur>px <spread>px <color>; Attach it to the element that should cast the shadow (usually the card surface, not an inner wrapper that clips overflow). If a parent has overflow: hidden, the shadow can be clipped — apply the shadow on the outer element or allow overflow. For multiple layers (common “Material-like” stacks), paste the first shadow then append more comma-separated shadows in your CSS: box-shadow: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12);
Parameter guide: X/Y offsets create direction (positive Y often reads as light from above). Blur softens the edge; Spread grows or shrinks the shadow before blur (negative spread tightens under small chips). Color is usually a semi-transparent black or brand tint — rgba(0,0,0,0.12–0.2) is a safe starting range on white UI. Prefer rgba/hsla over solid #000 so light themes stay soft and dark themes can invert to lighter glows.
Performance and polish: excessive multi-layer shadows on hundreds of list items can cost paint time — reserve heavy elevation for interactive focus states and floating panels. Pair shadows with subtle borders (1px divider) for low-elevation surfaces so cards remain defined when shadows are disabled in high-contrast modes. Test hover/focus shadows for keyboard users, and ensure focus rings remain visible (outline or box-shadow focus styles should not rely on color alone).
Dark mode tip: pure black shadows disappear on near-black backgrounds. Use lower opacity, slightly lighter shadow colors, or a thin border plus ambient glow. After you settle numbers here, store them as design tokens (--shadow-sm, --shadow-md) so product surfaces stay consistent.
ezToolFlow is operated by Vishvajeet Shukla. For privacy details on browser tools, accounts, and AI features, read our Privacy Policy.
Adjust X and Y for direction, then raise blur until the edge softens. Start near 0 / 8 / 24 for a familiar card elevation.
Spread expands or tightens the shadow footprint; color (often rgba) controls darkness and brand tint. Watch the sample card update live.
Click Copy CSS and paste box-shadow: …; onto your element. Stack extra comma-separated shadows in the stylesheet if you need multi-layer depth.
Define sm/md/lg shadow levels for product UIs without guessing pixel values in DevTools.
Create deeper, softer shadows that separate overlays from the page while staying on-brand.
Add light resting shadows and slightly stronger hover shadows for tactile feedback.
Agree on shadow recipes in the browser, then commit the exact CSS strings to your theme package.
Tip: after you finish, check Related tools at the bottom of this page for the next step in your workflow.
Quick answers about tools, privacy, limits, and pricing.
Order is offset-x, offset-y, blur-radius, spread-radius, then color. Blur softens; spread scales the shadow before blur; color sets opacity and hue.
Copy one shadow from the tool, then in CSS list several shadows separated by commas on the same box-shadow property for layered elevation.
A parent with overflow: hidden (or a tight border-radius clipping context) can crop shadows. Apply box-shadow on an outer wrapper or allow overflow where the shadow needs room.
Inset shadows (box-shadow: inset …) simulate pressed wells and input depth. This generator focuses on outer elevation; add the inset keyword manually when you need recessed looks.
Semi-transparent black or neutral gray (e.g. rgba(0,0,0,0.15)) on light UI. Avoid fully opaque black. On dark UI, try softer darks or subtle light glows plus borders.
Yes. Fair daily limits may apply by account tier; processing is browser-side with copy-to-clipboard export.
Yes. Box Shadow Generator is free to use on ezToolFlow. Guests and free accounts may have daily limits on some tools; premium tiers can raise or remove those limits. AI tools may also spend credits.
For browser-based tools, processing runs on your device when possible and files are not uploaded for conversion. Optional accounts, usage limits, and AI features are described in our Privacy Policy.
No for most tools — you can start as a guest. An account helps keep higher daily limits and saved work (for example AI resumes).
Close other heavy tabs, use a smaller input file, and try Chrome or Edge on desktop. Very large files can stress browser memory.
Keep working with similar free tools — no signup required for most.
Pick colors, convert between HEX, RGB, HSL formats
Open toolCreate QR codes for URLs, text, Wi‑Fi, email & phone — download PNG/SVG
Open toolDesign gradients and copy CSS
Open toolCheck WCAG color contrast ratios
Open toolScan QR codes from camera or uploaded images free in your browser
Open toolGenerate custom placeholder images by size and color free online
Open tool