Adjust offset, blur, spread, color, and opacity visually — get the exact box-shadow CSS code instantly.
Positive spread expands the shadow outward beyond the element's edges, while negative spread shrinks the shadow inward, useful for tighter, more subtle shadows.
An inset shadow appears inside the element's border rather than outside it, creating a pressed-in or recessed visual effect instead of a floating one.
This tool generates a single box-shadow value. Multiple shadows can be created by separating multiple values with commas in your own CSS.
This tool lets you build a CSS box-shadow visually — adjusting horizontal and vertical offset, blur radius, spread, color, and opacity with sliders — while seeing a live preview and generating the exact CSS code to copy into your stylesheet.
All shadow building happens directly in your browser — nothing is sent to a server.
The tool converts your chosen color and opacity into an rgba() value — reading the red, green, and blue channels from the hex color picker and combining them with the opacity percentage as the alpha channel — because box-shadow needs a color with built-in transparency rather than a separate opacity property. It then assembles the final declaration in the standard order the box-shadow property expects: horizontal offset, vertical offset, blur radius, spread radius, and color, with "inset" prepended when the inset checkbox is checked.
These three values interact rather than acting independently. A shadow with large offset but no blur looks like a hard, duplicated copy of the element; adding blur softens that duplicate into a realistic-looking shadow; and spread then controls whether the blurred shadow reads as larger or smaller than the element it belongs to. For a natural-looking drop shadow, a common starting point is a moderate vertical offset, a blur roughly two to three times the offset, and zero or slightly negative spread.
Checking the Inset box doesn't change any of the numeric values — it only adds the "inset" keyword to the CSS output, which tells the browser to draw the shadow inside the element's border box instead of outside it. The same offset, blur, spread, and color values that create a floating drop shadow when unchecked will instead create a pressed-in, recessed look when inset is enabled, which is why the live preview is useful for comparing both versions of the same shadow before deciding which one fits your design.
Hand-tuning a box-shadow by editing raw CSS numbers and reloading the browser to check the result is slow, especially when balancing offset against blur to get a shadow that looks neither too harsh nor too faint. Moving the sliders here and watching the preview box update in real time gets you to a usable value much faster, and the exact CSS is generated automatically so there's no risk of a typo in the property order or a missed unit.
CSS allows several shadow layers on one element by separating comma-separated box-shadow values, which is often used to combine a sharp, close shadow with a soft, far one for a more realistic layered effect. This generator produces one shadow value at a time — build each layer here individually, copy each one, and combine them manually in your stylesheet separated by commas.
A shadow with 100% opacity and a dark color often looks too heavy and artificial on light backgrounds — most realistic-looking shadows use 15-35% opacity. Another common mistake is using a large blur with zero spread on a small element, which can make the shadow look like a blurry halo rather than a grounded shadow; a small amount of negative spread combined with blur usually reads more naturally.
Visitors reach this tool searching for "css box shadow generator free," "box shadow preview tool," "css drop shadow code generator," "inset shadow css generator," and "box shadow rgba generator." This page covers all of these with a live, slider-driven preview and copyable CSS output.
box-shadow draws a shadow around an element's box — including rectangular and rounded-corner shapes — and is separate from text-shadow, which shadows individual glyphs, and filter: drop-shadow(), which follows the actual alpha shape of an image or SVG rather than its bounding box. If you need a shadow that hugs a transparent PNG's silhouette rather than its rectangular frame, filter: drop-shadow() is the right property instead of box-shadow, though the offset, blur, and color concepts carry over directly.
Many design systems define a small, consistent set of elevation levels — for example a subtle shadow for resting cards, a medium shadow for hover states, and a strong shadow for modals — rather than a unique shadow value for every component. Using this generator to dial in two or three reference shadows and reusing those exact values across a project keeps elevation visually consistent instead of every component having a slightly different, ad hoc shadow.