CSS workflow
CSS box-shadow: layers, inset shadows and clipping
A box shadow follows an element's box and rounded corners. Adjust it against the intended surface, then check the actual component's clipping, focus indicators and rendering cost.
Content updated: · Maintainer and corrections
Read the four lengths and layer order
The generated declaration lists horizontal offset, vertical offset, blur radius and spread radius, followed by an rgba() color. Negative offsets move a shadow left or up. Blur cannot be negative. Negative spread contracts an outer shadow's perimeter before blur; for an inset shadow, it expands the inner perimeter so the shadow recedes from the edge. Positive spread reverses those directions. Alpha 0 is transparent and alpha 1 is opaque.
Separate layers with commas. The first shadow is painted on top of subsequent shadows within the same inner or outer shadow group. Outer shadows sit below the background; inset shadows sit above the background but below content. Reordering an outer and an inset layer does not reverse these painting groups.
Choose outer or inset deliberately
An outer shadow suggests elevation around the box. The inset keyword draws inside the padding edge and can suggest a pressed surface. border-radius affects both shapes. A box-shadow follows the box, not an image's transparent silhouette; filter: drop-shadow() is a different effect.
The generator compares the same stack on light and dark surfaces. Preview colors and square or rounded corners are comparison settings and are not exported. Large shadows are scaled down to fit the frame; the scale is shown and does not change the copied pixel values. Native browser blur rendering may vary slightly.
Inspect clipping in the receiving layout
Box shadows do not reserve layout space. A large shadow may overlap nearby content, and an ancestor's overflow or paint containment can clip it. Test the target component rather than assuming that a clear preview guarantees a clear result in your layout.
Leave intentional spacing, inspect ancestor styles, and decide whether clipping belongs to the design. Do not remove a necessary overflow rule globally just to expose one shadow.
Keep focus visible and measure paint cost
A decorative shadow does not establish text contrast or keyboard focus visibility. Keep a clear focus indicator on interactive elements and test it on both light and dark backgrounds, including forced-colors mode. The tool's preview cards are decorative examples, not accessibility certification.
Large blurs, many repeated elements and animated shadow values can increase paint work. This editor has four layers and no automatic animation, but those limits do not guarantee performance after you copy the CSS. Test your actual page on the devices you support before adding animated elevation.
Know the input and export limits
Use decimal numbers in px: offsets from −100 to 100, blur from 0 to 200, spread from −100 to 100, and opacity from 0 to 1. Colors use six-digit sRGB HEX with a separate opacity control. Blank, non-finite, exponent, out-of-range or unsupported CSS values are rejected without silent clamping. These are editor limits, not the full CSS syntax.
You can remove every layer to export box-shadow: none;. Invalid fields block both output and copying; a failed clipboard action leaves selectable code for manual copy. Settings remain in the current page's memory and are not uploaded, persisted or included in a share URL. This editor does not import arbitrary CSS, edit pseudo-elements, or export Tailwind classes.
.card {
box-shadow:
0 2px 4px 0 rgba(24, 32, 42, 0.12),
0 12px 32px 0 rgba(24, 32, 42, 0.1);
}
.card:focus-visible { outline: 2px solid #315460; outline-offset: 4px; }Data provenance