CSS Box Shadow Generator

The Complete Guide to CSS Box Shadows

The box-shadow CSS property is one of the most powerful tools in a web designer's arsenal. It adds depth, establishes visual hierarchy, and turns flat designs into tactile, interactive interfaces. Whether you are building subtle elevation layers for a Material Design UI or creating trendy "neumorphic" soft UI components, mastering box shadows is essential. Our free CSS Box Shadow Generator lets you visually design complex shadows and instantly grab the cross-browser CSS.

Understanding Box Shadow Syntax

The standard CSS box-shadow property accepts up to six values:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color] [inset];

• Horizontal Offset: Required. A positive value pushes the shadow right; negative pushes it left.
• Vertical Offset: Required. A positive value pushes the shadow down; negative pushes it up.
• Blur Radius: Optional (defaults to 0). Higher values make the shadow larger and softer. It cannot be negative.
• Spread Radius: Optional (defaults to 0). Positive values expand the shadow's size in all directions; negative values shrink it.
• Color: Optional (defaults to the text color). Usually an RGBA value for transparency (e.g., rgba(0, 0, 0, 0.2)).
• Inset: Optional keyword. If present, it draws the shadow inside the element's border.

Outset vs. Inset Shadows

Outset (Drop Shadows): This is the default. The shadow is drawn outside the element, making the element look like it is floating above the page. Used for modals, cards, floating action buttons (FABs), and dropdown menus.

Inset Shadows: By adding the inset keyword, the shadow is drawn inside the element. This creates a "pressed-in" or indented look. Used for form inputs, pressed button states, and progress bar tracks.

Multiple Box Shadows

You can apply multiple shadows to a single element by separating them with commas. This is the secret to creating highly realistic, smooth shadows. A single shadow often looks harsh, but layering 3–5 very faint shadows creates a beautiful, diffuse effect.

box-shadow: 
0 1px 2px rgba(0,0,0,0.07), 
0 2px 4px rgba(0,0,0,0.07), 
0 4px 8px rgba(0,0,0,0.07), 
0 8px 16px rgba(0,0,0,0.07);

Box Shadow Performance Tips

While shadows look great, they are computationally expensive for browsers to render. During animations (like scrolling or hovering), heavy shadows can cause lag.

• Don't animate box-shadow directly: Animating box-shadow forces the browser to repaint the element on every frame.
• The performant way: Use a pseudo-element (::after) with the shadow applied. Transition the opacity of the pseudo-element instead. Animating opacity and transform is hardware-accelerated.
• Keep blur radiuses reasonable: Massive blur radiuses (e.g., 100px+) require significant processing power.

Design Trends: Neumorphism

Neumorphism (Soft UI) is a design trend that relies entirely on complex box shadows to create elements that look like they are extruded from the background. It combines a light highlight shadow (top-left) with a dark drop shadow (bottom-right) on a background of the exact same color. You can easily create neumorphic designs using our generator by adjusting the spread and dual shadows.

Use our free Box Shadow Generator to create perfect drop shadows visually. For other CSS generation tools, try our CSS Gradient Generator and Color Palette Generator.