Developer

Box Shadow Generator

Tune blur, spread, offsets, color, and inset shadows with an instant CSS preview.

Loading interactive tool…

Embed this tool on your site

About this tool

Box shadows communicate depth and hierarchy in UI design, but writing them by hand means juggling four lengths, an optional inset keyword and a color. The Box Shadow Generator gives you sliders for horizontal and vertical offset (−50 to 50 px), blur (0 to 100 px) and spread (−30 to 50 px), a color picker and an Inset checkbox, and applies the shadow to a sample card as you drag. The CSS box always holds the matching box-shadow declaration, ready to copy with Copy CSS. The color picker produces an opaque hex color, so for softer shadows replace it with an rgba() or hex-with-alpha value after copying, and add extra comma-separated layers by hand if you want stacked shadows.

Why use it

  • Visual Iteration: Drag sliders to change offset, blur, and spread in real time instead of editing magic numbers in a text file, saving the back-and-forth between code editor and browser DevTools on every tweak.

  • Useful Default: The starting values (12px 14px 30px -6px) already give an offset card shadow you can tweak from.

  • Inset Support: Switch to inner shadows instantly to style pressed button states, inset form fields, or recessed panels. The same sliders control the inset geometry, so you iterate just as quickly as on outer shadows.

  • Token-Friendly: Copy clean values into a design-system elevation scale like --elevation-1 through --elevation-4. Consistent shadows across components become a repeatable token rather than per-component guesswork.

  • Wide Slider Ranges: Offsets from −50 to 50 px, blur up to 100 px and spread from −30 to 50 px cover subtle outlines through large floating shadows.

  • Copy-Ready CSS: One click copies the complete box-shadow declaration with no vendor prefixes, which modern browsers do not need.

How to use

  1. Set the Horizontal and Vertical sliders to position the shadow
  2. Drag Blur to soften or sharpen the shadow edge
  3. Adjust Spread to grow the shadow footprint or use negative values to tighten it
  4. Pick a shadow color with the Color picker (an opaque hex value)
  5. Tick Inset to create an inner shadow for pressed or recessed elements
  6. Click Copy CSS to grab the box-shadow declaration, then lower the color's opacity in your stylesheet if needed

When it helps

  • When building a card component and need consistent, realistic elevation across multiple surface levels
  • When styling a modal or drawer that must float visually above the page content
  • When designing a pressed or active button state that needs an inset shadow instead of a raised one
  • When creating a design-system elevation scale and need reproducible shadow tokens
  • When porting a Figma design to CSS and the shadow values aren't obvious from the design file
  • When you want to compare an inset and an outer shadow with the same settings before choosing one

Examples

Default card shadow

Input
Horizontal 12, Vertical 14, Blur 30, Spread -6, Color #000000
Expected result
box-shadow: 12px 14px 30px -6px #000000;

Floating modal

Input
Horizontal 0, Vertical 24, Blur 48, Spread -12, Color #000000
Expected result
box-shadow: 0px 24px 48px -12px #000000;

Inset pressed button

Input
Inset ticked, Horizontal 0, Vertical 2, Blur 4, Spread 0, Color #333333
Expected result
box-shadow: inset 0px 2px 4px 0px #333333;

Tips

  • Stack two shadows — one tight (0 2px 4px, low opacity) for close contact and one diffuse (0 8px 24px, lower opacity) for ambient — to get realistic depth without a heavy look
  • Keep the y-offset larger than the x-offset to simulate overhead lighting, which matches how users expect light to fall in most UI contexts
  • The picker gives an opaque color; after copying, swap it for an rgba() value in the 0.06–0.15 alpha range for outer shadows, since darker values look painted-on.
  • Negative spread values shrink the shadow footprint before blurring, useful for creating a soft glow that stays close to the element edge
  • Store finalized shadow values as CSS custom properties like --elevation-1 and --elevation-2 so your entire design system stays consistent

Frequently Asked Questions

What is the difference between blur and spread in box-shadow?
Blur controls how soft the shadow edge is — a higher value creates a feathered, diffuse shadow. Spread independently expands or contracts the shadow's overall size before blurring. Positive spread makes the shadow larger than the element; negative spread shrinks it for a tighter halo effect.
How do I create a Material Design elevation shadow?
Material elevation uses two stacked shadows: a short, dark key shadow and a taller, lighter ambient shadow. For elevation-2, try 0 1px 3px rgba(0,0,0,0.12), 0 1px 2px rgba(0,0,0,0.24). Higher elevations increase the y-offset and blur proportionally.
Can I stack multiple box-shadows on one element?
Yes. CSS accepts a comma-separated list of shadows, and the first one paints on top. This generator builds one shadow at a time, so create each layer, copy it, and join the values with commas in your stylesheet.
Why does negative spread create a tighter shadow?
Spread is applied before blur, so a negative spread shrinks the pre-blur shape. When you then add blur, the diffusion starts from a smaller base, producing a soft halo that hugs the element closely rather than extending outward.
How do inset shadows differ from outer shadows?
Outer shadows render outside the element's border box, creating an elevated look. Inset shadows render inside the border box, making the element appear pushed in or recessed. Inset shadows are useful for pressed buttons, sunken inputs, and inner-glow effects.
Will box-shadow affect element layout or hit area?
No. box-shadow is purely visual and does not affect layout flow, take up space, or expand the element's interactive hit area. The element's position, size, and clickable region remain exactly as defined by width, height, and padding.
How do I make shadows look natural in dark mode?
In dark mode, pure black shadows on dark backgrounds disappear. Use shadows with a slightly lighter color than the surface, or rely on subtle elevation cues through background color differences rather than shadows alone. A very low-opacity white shadow can also simulate light reflection.
Does box-shadow render on rounded corners correctly?
Yes. box-shadow follows the element's border-radius automatically, so shadows on rounded cards and pill buttons conform to the curved shape without any extra work. The shadow traces the visible outline of the element including all corner curves.
How do I make the shadow semi-transparent?
The color picker only returns opaque hex colors, so the copied CSS uses a solid color such as #000000. Replace it with rgba(0,0,0,0.15) or an 8-digit hex like #00000026 in your stylesheet for a softer shadow.

Explore the category

Text Shadow Generator Stack up to three readable text shadows and export CSS for headings and hero type. CSS Filter Playground Stack blur, color, and tonal CSS filters with sliders and copy-ready filter declarations. Glassmorphism Generator Tune blur, saturation, translucency, and borders for frosted glass panels. Neumorphism Generator Craft soft extruded or inset soft UI shadows tuned for light and dark surfaces. CSS Spinner Generator Browse spinner presets, tweak size speed and color, and copy animation-ready CSS. CSS Button Generator Style padding, radius, colors, borders, and optional hover darken with instant previews.
CSS Custom Properties (Variables) Explained with Real Examples CSS custom properties are far more powerful than SASS variables — they are live, inheritable, and can be changed with JavaScript at runtime. Apr 2026 · 8 min CSS Specificity: The Complete Guide to the Cascade and Inheritance CSS specificity is the invisible rule that decides which style wins when two selectors target the same element. Understanding it lets you de Apr 2026 · 9 min

Glossary

Offset
The x and y values that shift a shadow horizontally and vertically from the element. Positive x moves the shadow right; positive y moves it down.
Blur Radius
Controls the softness of the shadow edge. A value of 0 produces a sharp, solid shadow; higher values create a progressively more diffuse and feathered edge.
Spread Radius
Expands or contracts the shadow uniformly in all directions before blurring. Positive values enlarge the shadow; negative values shrink it.
Inset Shadow
A box-shadow with the inset keyword renders inside the element's border box, making content appear recessed or pressed rather than elevated.
RGBA
A color format specifying Red, Green, Blue, and Alpha (opacity) channels. Alpha ranges from 0 (fully transparent) to 1 (fully opaque) and is essential for soft, natural shadow colors.
Elevation
In design systems like Material Design, elevation is a scale of box-shadow values that communicates how high above the base surface a component appears to float.
A LITTLE HELP. A LOT DONE.
Good tools.
Great flow.

Your shortcut to the everyday. Create, convert, calculate,
and get back to what you love.

✓ Free to use✓ No sign-up✓ 500+ possibilities