CSS Box Shadow Generator
Tune offset, blur, spread, color, and opacity to craft a CSS box-shadow with a live preview. Supports inset shadows. Everything runs in your browser.
- CSS
- box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);
FAQ
What does each value mean?
Offsets position the shadow, blur softens it, and spread grows/shrinks it. Negative spread keeps the shadow tucked under the element for natural card shadows.
How do I layer multiple shadows?
Comma-separate multiple shadows: generate each layer here and join them like '0 1px 2px …, 0 8px 24px …'.
When should I use inset?
Inset draws the shadow inside the element—useful for pressed buttons, recessed inputs, and inner highlights.
Related tools
Compute the contrast ratio between text and background colors and check WCAG 2.x AA/AAA accessibility compliance. Everything runs in your browser.
Generate a HEX palette of tints and shades from a base color—useful for design-system color scales. Everything runs in your browser.
Convert between px, rem, em, pt, and % based on a root font size. Handy for responsive typography. Everything runs in your browser.
Convert between HEX, RGB and HSL color codes with a live preview.
Generate responsive clamp() code from size and viewport ranges for fluid typography—no media queries needed. Everything runs in your browser.
Minify CSS by removing comments and unnecessary whitespace while preserving string values. Everything runs in your browser.