CSS Box Shadow Generator
Generate CSS box-shadow code with live preview online free — customize shadow color, blur, spread, and offset visually.
Last updated: 10 October 2026
Generate CSS box-shadow with live preview — offsets, blur, spread, color and multiple layers. The value 0px 4px 12px rgba(0,0,0,0.13) reproduces Material Design elevation-2 on a card element.
box-shadow: 4px 4px 8px 0px #000000;
Worked Examples
Tested shadows
- 0px 4px 12px rgba(0,0,0,0.13) → Material Design elevation-2 effect
- Layered: 0px 2px 4px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1) → soft realistic depth
- Spread radius grows or shrinks the shadow independent of the element size
Designing elevation
- Higher elevation: larger blur, slightly larger vertical offset, lower alpha.
- Inset shadows simulate inner surfaces — pressed buttons and text fields.
- One soft shadow beats three hard ones; stack only when mimicking paper layers.
About CSS Box Shadow Generator
Generate CSS box-shadow code with live preview. Adjust horizontal offset, vertical offset, blur radius, spread radius, and shadow color. Add multiple shadows for realistic depth effects. Test data: generated 0px 4px 12px rgba(0,0,0,0.13) — produces a Material Design elevation-2 effect on a card element. A layered shadow of 0px 2px 4px rgba(0,0,0,0.1), 0px 8px 16px rgba(0,0,0,0.1) created a realistic soft-shadow effect matching modern UI frameworks.
Limits: Does not generate drop-shadow filter (for PNG/SVG transparency) — only box-shadow; Very large blur values (200px+) may render differently across browsers; Does not support animation or transition of shadow properties — add those manually; Shadow rendering performance may drop on elements with complex child layouts
Who Uses This Tool
- A UI designer generating a realistic card elevation shadow for a web application dashboard
- A developer creating a pressed-button effect using inset shadows for an interactive form
- A CSS artist layering multiple shadows to simulate a 3D floating element without using transforms
Key Features
- Live preview with adjustable element
- Multiple stacked shadows
- Inset shadow option
- Full color and opacity control
- Copy CSS code instantly
- Pixel-precise slider control
How to use CSS Box Shadow Generator
- Adjust the horizontal and vertical offset sliders to position the shadow.
- Set blur radius for softness (0 = sharp edge, higher = more blur).
- Set spread radius to expand or contract the shadow.
- Choose the shadow color and opacity.
- Copy the generated CSS code.
How It Compares
Unlike h usability's box-shadow tool which only supports single shadows, this tool generates multiple stacked shadows — essential for realistic depth. It also provides real-time preview on an actual element, while many generators only show a static color swatch.
Privacy & Security
Because processing happens directly in your browser, your files and input are not uploaded to our servers.
Written and checked by Mohammad Sohail
Shadow values re-checked on 10 October 2026 against Material Design elevation specs.
About FreeDigitalToolkit →Frequently Asked Questions
What is box-shadow?
box-shadow adds shadow effects around an element, creating depth and visual hierarchy. It accepts five main values: horizontal offset, vertical offset, blur radius, spread radius, and color.
What's the difference between blur and spread?
Blur radius controls how soft the shadow edges are — 0 gives a hard edge, 30+ gives a very soft glow. Spread radius expands (positive) or contracts (negative) the shadow size before blurring.
How do I create Material Design-style elevation?
Use two layered shadows: a tight shadow (0px 2px 4px rgba(0,0,0,0.1)) for the core shadow and a wider shadow (0px 8px 16px rgba(0,0,0,0.1)) for ambient depth. This replicates the multi-light-source model used in Material Design.
Can I add an inset shadow?
Yes. Enable the inset toggle on any shadow. Inset shadows appear inside the element's border, useful for pressed buttons, input fields, or inner glow effects.
Why does my shadow look different in Firefox vs Chrome?
Modern browsers handle box-shadow consistently, but rendering differences can occur with very large blur values (100px+). Test at the sizes you'll actually use. The generated CSS includes no vendor prefixes needed for modern browsers.
Related Tools
Browse all Generator Tools or explore our full collection of 86 free tools.