Box Shadow Generator
Compose CSS box-shadow visually — adjust X/Y offset, blur, spread, and color with a live preview. Copy the final CSS rule with one click. Supports multiple shadow layers.
box-shadow: 0px 8px 24px -8px rgba(99, 102, 241, 0.40);How to use the box shadow generator
Tweak the sliders to compose a CSS box-shadow. The preview updates live; click Copy when satisfied.
Formula & explanation
box-shadow: [inset?] x y blur spread color. Multiple shadows can be comma-separated to layer effects.
Examples
Default: a soft indigo glow under the box.
Frequently asked questions
- What do the four box-shadow values mean?
- In order: horizontal offset, vertical offset, blur radius, and spread radius — all in pixels. A positive Y offset drops the shadow down; negative lifts it up.
- How does spread affect the shadow?
- Positive spread expands the shadow beyond the element's edges; negative spread shrinks it, which is useful for creating tight, realistic depth effects.
- What does the 'inset' option do?
- Inset flips the shadow to the inside of the element, making it look sunken or pressed in rather than raised.
- Can I stack multiple box shadows?
- Yes — copy this output and comma-separate it with another shadow declaration (e.g. box-shadow: 0 2px 4px #000, 0 8px 24px rgba(0,0,0,.2);) to layer effects.
Related design & css tools
- CSS Gradient GeneratorBuild linear and radial CSS gradients visually with a live preview and copy-ready CSS output. Control colors, stops, angle, and shape — no code required.
- Border Radius GeneratorBuild CSS border-radius values visually — symmetric, asymmetric, or fully custom per-corner shapes. Live preview with copy-ready CSS output for any border-radius combination.
- Type Scale GeneratorGenerate a modular type scale from a base font size and ratio (Major Third, Perfect Fourth, Golden Ratio, and more). Outputs CSS custom properties for a consistent typographic system.
- Spacing Scale GeneratorBuild a consistent spacing scale for design systems — enter a base unit and multiplier to generate a full set of spacing tokens in px and rem, ready for Tailwind or CSS variables.
- Image Color PaletteExtract a dominant color palette from any uploaded image. Shows the top colors with HEX values — useful for brand identity, design matching, and color inspiration.
- WCAG Contrast CheckerCheck foreground/background color contrast ratios against WCAG 2.1 AA (4.5:1) and AAA (7:1) standards. Enter HEX or RGB values — see pass/fail for normal and large text.