Create beautiful, layered CSS box shadows with a live preview. Stack multiple shadow layers for smooth, realistic depth effects.
Start by adjusting the offset, blur, spread, and colour of the default shadow layer. To create more realistic, layered shadows, click + Add Shadow Layer and stack multiple shadows together. Click any layer in the list to edit it. Use the presets above for quick starting points, then customise to match your design.
The CSS box-shadow property adds one or more shadow effects to an element's frame. The basic syntax takes five values: horizontal offset, vertical offset, blur radius, spread radius, and colour. A positive horizontal offset pushes the shadow right; a positive vertical offset pushes it down. The blur radius controls how soft the edges are, and the spread radius expands or shrinks the shadow.
The secret to beautiful shadows is layering. A single shadow with a large blur looks flat and unnatural. Instead, stack two to four shadows with different sizes — a small, tight shadow for definition, a medium shadow for the main depth, and a large, subtle ambient shadow. This mimics how light behaves in the real world, where objects cast multiple shadows from different light sources.
Adding the inset keyword flips the shadow to the inside of the element. This creates a pressed, recessed, or carved effect. Inset shadows are commonly used for input fields, wells, and neumorphism design patterns. You can combine inset and outset shadows on the same element for complex effects.
Box shadows are rendered efficiently in modern browsers and have minimal impact on page performance. The main thing to avoid is animating the box-shadow property directly, as it triggers repaints on every frame. If you need animated shadows, consider transitioning opacity on a pseudo-element with a fixed shadow instead.
box-shadow property and accepts values for horizontal offset, vertical offset, blur radius, spread radius, and colour. Multiple shadows can be stacked by separating them with commas.box-shadow property on any element. The syntax is: box-shadow: [x] [y] [blur] [spread] [colour];. For example: box-shadow: 4px 4px 12px rgba(0,0,0,0.15); creates a subtle shadow offset down and to the right.box-shadow declaration. Layering several subtle shadows creates a much more realistic depth effect than a single heavy shadow.box-shadow applies to the rectangular box of an element. The filter: drop-shadow() function follows the actual visible shape, including transparent areas. Use box-shadow for cards and containers; drop-shadow for irregular shapes.inset keyword places the shadow inside the element. This creates a pressed or recessed effect, useful for input fields, wells, and neumorphism designs.box-shadow directly — animate opacity on a pseudo-element with a fixed shadow for smooth transitions instead.