Zero Snippet

CSS box shadow generator — offset, blur, spread, color, inset, and copy-ready declarations

Use this free online box shadow generator to design drop shadows and inset shadows for cards, buttons, and modals without guessing pixel values. Adjust horizontal and vertical offset, blur radius and spread, pick a shadow color with opacity, and toggle inset for pressed or recessed UI. The live preview updates instantly; Copy CSS (with the copy icon) pastes a complete box-shadow line into Figma handoffs, Storybook, or your stylesheet. Optionally upload a background image (upload icon) to judge contrast on real photography or dashboards. Everything runs in your browser—no account. Pair shadows with the border radius generator, gradient generator, and color picker for cohesive UI kits. Browse all design and color tools.

Live preview

Optional: upload a background image to judge the shadow on real content.

Card

CSS

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.14);

Why use a dedicated box shadow generator for CSS?

The box-shadow syntax packs several numbers into one declaration: offsets, blur, spread, and color. Tweaking in DevTools is fast, but teams also need repeatable elevation scales —for example “card resting,” “dropdown,” and “modal” shadows—that look right in light and dark themes. A visual CSS shadow generator lets designers and developers agree on the same values, export one line of CSS, and document tokens without manual rounding errors. Searchers often look for drop shadow generator, inset shadow CSS, or card shadow generator; this page focuses on standards-based box-shadow only (not SVG filters or text-shadow), so the output drops straight into component CSS.

How blur, spread, and opacity interact

Blur softens the shadow—high blur with small offset yields a diffuse ambient lift. Spread expands or contracts the shadow before blurring: positive spread thickens the silhouette (useful for subtle borders made from shadow), negative spread tightens the halo for crisp, Apple-style elevations. Opacity here scales the alpha channel of your chosen color so you can keep brand hue and only change strength—handy when the same RGBA token must work on both white cards and tinted surfaces. For accessible text on colored panels, validate contrast with the color contrast checker.

How to use this box shadow generator (step by step)

  1. Start from a preset (soft card, floating, crisp drop, or inset well) or set offset X/Y, blur, and spread manually.
  2. Choose shadow color with the color picker or hex field, then adjust opacity for subtle elevation on dark backgrounds.
  3. Enable Inset shadow when you need an inner recess (buttons, wells) instead of a floating card.
  4. Optionally click Upload background to preview the shadow on your own image; use Clear background to reset.
  5. Click Copy CSS to copy box-shadow: …; into your codebase or design specs.

Layering shadows with gradients and radius

Production UIs often combine box-shadow with border-radius and soft gradients. After you lock a shadow, round corners with the border radius generator, build hero backgrounds using the CSS gradient generator or gradient generator, and keep brand hues aligned with the color palette generator. For raw stylesheet cleanup, use the CSS formatter.

Keywords and workflows this tool supports

Teams search for material elevation CSS, neumorphism shadow (soft inset/outset combos), tailwind shadow token references, and copy paste box shadow. This generator emphasizes a single, clear declaration you can split into design tokens or extend with comma-separated layers in your own Sass or CSS variables. It does not replace full design tools, but it is ideal for quick handoffs and documentation pages.

Related design tools

More from the design and color tools collection:

  • Color Picker & Converter — Pick colors and copy HEX, RGB, HSL, and CMYK values for design systems and handoff.
  • Color Contrast Checker — Test text and background pairs against WCAG AA and AAA contrast ratios for accessible UI.
  • Color Palette Generator — From one base hue, build complementary, triadic, analogous, and monochrome palettes.
  • Gradient Generator — Design linear and radial gradients visually and copy production-ready CSS in seconds.
  • Tint & Shade Generator — Generate lighter tints and darker shades from a brand color for consistent UI scales.
  • Color Blindness Simulator — Preview images or palettes under common color-vision deficiencies to validate inclusive design.
  • Border Radius Generator — Adjust each corner visually and export shorthand border-radius for cards and buttons.
  • CSS Gradient Generator — Build multi-stop gradients with angles and stops—outputs clean, modern CSS gradients.
  • Flexbox Playground — Tweak flex container and item properties and see layout updates in real time.
  • CSS Grid Playground — Prototype grid templates, gaps, and placement with instant visual feedback.
  • Favicon Generator — Create favicon.ico and PNG sizes from an image or text for every device and browser tab.

Frequently asked questions

What is the CSS box-shadow property used for?
The box-shadow property draws one or more shadows around an element’s frame. You control horizontal and vertical offset, blur radius, spread distance, color (often with transparency), and whether the shadow is drawn outside the box or as an inset shadow inside it. It is widely used for cards, buttons, modals, and elevation in design systems.
What is the difference between blur and spread in box-shadow?
Blur softens the shadow edge: higher values produce a fuzzier, larger-looking halo. Spread grows or shrinks the shadow before blur is applied: positive spread makes the shadow bigger and more solid at the edges; negative spread pulls the shadow inward, which can produce a tighter, sharper ring. Together they let you mimic soft ambient light or crisp drop shadows.
When should I use an inset box shadow?
Inset shadows appear inside the element border box. They are useful for pressed buttons, recessed panels, inner wells, and subtle highlights along the top edge of inputs. Combine inset with a low-opacity dark color for depth, or pair with a normal outer shadow for layered chrome effects.
Does box-shadow affect layout or accessibility?
Box-shadow does not change box model dimensions or reflow surrounding content, but a large shadow can visually overlap nearby text or controls—leave enough padding and test zoom and dark mode. For WCAG contrast, shadows do not replace text or icon contrast against backgrounds; use the Color Contrast Checker when typography sits on colored surfaces.
Should I copy WebKit-prefixed box-shadow?
Modern browsers support unprefixed box-shadow. Legacy Safari sometimes needed -webkit-box-shadow, but for new projects a single box-shadow declaration is usually enough. If you must support very old clients, add the prefixed line above the standard property in your stylesheet.
How do I stack multiple box shadows?
Separate each shadow with commas in one box-shadow declaration: outer shadows first, then inset layers as needed. This generator outputs one shadow; you can paste the result into your CSS and duplicate the line with different offsets or colors to build layered elevation. Pair with gradients from a CSS gradient generator for richer backgrounds.
Is this box shadow generator free and private?
Yes. All calculations run in your browser. Optional background images for the preview stay in memory via object URLs and are not uploaded to any server. You can disconnect from the network after the page loads if you prefer.