Design beautiful CSS box-shadows visually. Drag sliders to control offset, blur, spread, color, and opacity. Add multiple shadow layers for advanced effects. The ready-to-use CSS updates live — copy it with one click.
The CSS box-shadow property adds one or more shadow effects to an element's frame. The full syntax is: box-shadow: [inset] <offset-x> <offset-y> [blur-radius] [spread-radius] <color>. You can stack multiple shadows by separating them with commas — layers are rendered from front to back, making the first value the topmost shadow. This stacking is key to creating sophisticated multi-layer effects like neumorphism, elevation systems (as used in Material Design), or realistic soft shadows with multiple diffusion layers.
box-shadow over filter: drop-shadow() for rectanglestransition: box-shadow for smooth hoverBoth box-shadow and filter: drop-shadow() create shadow effects, but they work very differently. box-shadow always follows the rectangular bounding box of an element, regardless of its visual shape. filter: drop-shadow() follows the actual visible pixels — including transparent areas — which makes it the right choice for irregular shapes like PNG cutouts or SVG icons.
For performance, box-shadow is generally the better choice for standard UI elements like cards, buttons, and modals. It is GPU-composited and does not trigger layout. Use filter: drop-shadow() when you truly need shape-aware shadows, but be aware it is more expensive to render, especially when animated. In both cases, prefer will-change: box-shadow or will-change: filter sparingly and only when animating these properties.