Generate CSS box shadow code online free with a live preview. Adjust offset, blur, spread, color, and opacity visually, then copy the ready-to-use CSS snippet.
Box shadow values are hard to visualize from numbers alone. Adjusting 0 4px 6px rgba(0,0,0,0.1) to look right requires guessing and checking. A visual builder eliminates iteration and gets you to the right shadow immediately.
Add shadows to elements visually - set horizontal and vertical offset, blur radius, spread, color, and opacity, then copy the CSS box-shadow property. No guessing at shadow values.
Add depth shadows to cards and modals, create hover state shadows for interactive elements, design button press effects with inset shadows, build soft neumorphic shadow effects, add elevation shadows matching Material Design specs, and create colored glow effects for dark-mode UI.
The most common question is about multi-layer shadows. CSS allows stacking multiple shadows by separating values with commas: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08); - each adds a separate shadow layer on the same element.
Set X/Y offset, blur radius, spread, color, and opacity.
See the shadow render on a card in real time.
Stack multiple shadow layers for complex effects.
Click copy to get the box-shadow CSS property.
Common questions about this tool and how to use it.
box-shadow: h-offset v-offset blur spread color; - all values required except spread and inset. h-offset: positive = right, negative = left. v-offset: positive = down, negative = up. blur: higher = softer (0 = sharp edge). spread: positive = larger shadow, negative = smaller. Example: box-shadow: 0 4px 12px rgba(0,0,0,0.15); - a common soft drop shadow.
Add the 'inset' keyword at the start: box-shadow: inset 0 4px 8px rgba(0,0,0,0.2); - the shadow appears inside the element rather than outside. Inset shadows are used for pressed button states, input focus rings (dark backgrounds), and sunken panel effects. You can combine inset and outset shadows: box-shadow: 0 2px 4px rgba(0,0,0,0.1), inset 0 1px 2px rgba(255,255,255,0.3);
Yes - separate each shadow value with a comma. They render in order from front to back. Example: box-shadow: 0 4px 6px rgba(0,0,0,0.1), 0 1px 3px rgba(0,0,0,0.08), 0 0 0 1px rgba(0,0,0,0.03); - three layered shadows for a realistic elevation effect. Multiple shadows are common in Material Design elevation specs and card component designs.
box-shadow applies to the element's rectangular bounding box - it ignores transparency within the element. filter: drop-shadow(h v blur color) follows the actual visible shape of the element, including transparent areas. This matters for PNG images and SVGs where you want the shadow to follow the image silhouette instead of the rectangular container. drop-shadow is slower to render than box-shadow.
Neumorphism requires two shadows on the same element: one lighter than the background (top-left), one darker (bottom-right). Example for a gray #e0e5ec background: box-shadow: 9px 9px 16px rgba(163,177,198,0.6), -9px -9px 16px rgba(255,255,255,0.5); - adjust the shadow colors to match your specific background. The shadows must match the background color for the raised-surface illusion to work.
Leave your email so we can prioritize similar tools and updates.
Trending tools will appear as visitors explore the catalog.
Your recently visited tools will show up here.