CSS Box Shadow Generator
Design CSS box-shadow effects visually with multiple layers, inset support, opacity control, and ready-to-copy CSS output.
Live preview
Preview background
Box color
Presets
Shadow Layers
px
px
px
px
%
CSS Output
box-shadow: 0px 4px 16px -2px rgba(0, 0, 0, 0.15);
How to Use CSS Box Shadow Generator
- 1Adjust shadow offset, blur, spread, and color with sliders.
- 2Add multiple shadow layers for complex effects.
- 3Try presets like neumorphic, floating card, or glow.
- 4Copy the generated CSS code for your project.
Zenovay
Privacy-first analytics for your website
Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.
Related Tools
CSS Gradient GeneratorCreate beautiful CSS gradients with a visual editor. Linear, radial, and conic gradients.
CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.
CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.
CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.
Frequently Asked Questions
What is the CSS box-shadow syntax?▾
box-shadow takes up to five values: offset-x, offset-y, blur-radius, spread-radius, and color, optionally preceded by the inset keyword. Example: box-shadow: 2px 4px 8px 0px rgba(0,0,0,0.2). offset-x is the horizontal position (positive = right), offset-y is the vertical position (positive = down), blur-radius controls softness (0 = sharp edge), and spread-radius expands or contracts the shadow before blurring. Multiple shadows are comma-separated, with the first value rendered on top.
How do I layer multiple box shadows?▾
You can stack any number of shadow values by separating them with commas: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.08). The first shadow in the list renders on top. Layered shadows are the key to photorealistic depth — a close, tight shadow captures direct light while a distant, diffuse shadow represents ambient occlusion. Use this tool's "Add layer" button to build up multiple shadow layers visually.
What does the inset keyword do in box-shadow?▾
Adding inset flips the shadow so it appears inside the element rather than behind it, creating a pressed, recessed, or engraved look. Common uses include pressed button states, depth on text inputs, neumorphic design, and progress bars with inner glow. The element's dimensions are unaffected by inset shadows — only visual appearance changes. You can mix inset and outer shadows on the same element: box-shadow: inset 0 2px 4px rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.1).
Does box-shadow affect layout or performance?▾
box-shadow does not affect layout — it is rendered outside the element's box model and does not push other elements. For performance, box-shadow is composited on the GPU and does not trigger layout or paint in most browsers when the element is on its own compositing layer (e.g., via will-change: box-shadow or transform). However, animating box-shadow does cause repaint; for animated shadows, consider using a pseudo-element with opacity transitions as an optimization. Very large blur radii (> 50px) on many elements can affect paint performance.
What browsers support box-shadow?▾
box-shadow has full support in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. It has been supported without vendor prefixes since Chrome 10+, Firefox 4+, Safari 5.1+, and IE 9+. You no longer need -webkit-box-shadow or -moz-box-shadow for any actively-supported browser. The rgba() color function used for alpha transparency is equally universally supported. CSS custom properties (var(--shadow)) also work inside box-shadow values.