CSS Box Shadow Generator

What is CSS box-shadow?

The CSS box-shadow property adds shadow effects around an element's frame. Shadows are a fundamental tool for creating depth, elevation, and visual hierarchy in web design. A well-crafted shadow can make a card appear to float above the page or give a button a pressed appearance.

Box-shadow accepts multiple parameters: horizontal offset, vertical offset, blur radius, spread radius, and color. You can also add the inset keyword to create inner shadows. Multiple shadows can be layered on a single element by separating them with commas, and they render back-to-front.

Box-shadow syntax breakdown

The full syntax is: box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color. The offset-x and offset-y values are required and define the shadow's position relative to the element. Positive values move the shadow right and down. Blur-radius softens the edges — a value of 0 creates a sharp shadow. Spread-radius expands or shrinks the shadow — negative values create a tighter shadow.

How to use this tool

Adjust the sliders for horizontal offset, vertical offset, blur, spread, and color. The preview updates in real time so you can see exactly how the shadow will look. Toggle the inset option for inner shadows. Add multiple shadow layers for more realistic depth effects. When you are satisfied, copy the generated CSS code.

Tips for effective shadows

• Use subtle shadows with low opacity for a clean, modern, elevated appearance.
• Layer multiple shadows for more realistic depth — a sharp close shadow plus a soft diffused shadow mimics real-world lighting.
• Larger blur with a slight offset creates a soft floating effect ideal for cards and modals.
• Negative spread creates a tighter, more focused shadow useful for subtle borders.
• Match shadow direction consistently across your entire page — inconsistent light sources look unnatural.

Material Design elevation system

Google's Material Design defines elevation levels from 0dp to 24dp, each with specific shadow values. Higher elevation means larger blur and offset values. This system ensures consistent visual hierarchy across an application. Even if you do not follow Material Design, the principle of using consistent elevation levels is valuable for any design system.

Performance impact

Box shadows are GPU-accelerated in modern browsers and have minimal performance impact for typical use. However, very large blur radii (50px+) on many elements simultaneously can cause frame drops during animations. If you need to animate shadows, consider using transform: scale() to grow a pseudo-element with a static shadow instead of animating the shadow values directly.

Frequently asked questions

What is the difference between box-shadow and drop-shadow?

box-shadow applies to the element's rectangular box, including padding and border. The filter: drop-shadow() function follows the element's actual shape, including transparent regions in images. Use drop-shadow for non-rectangular elements like icons or PNG images with transparency.

Can I use box-shadow to create borders?

Yes. A box-shadow with zero blur and a positive spread acts like a border that does not affect layout. This technique is useful when you need a visual border without changing the element's dimensions, for example during hover states.