CSS Box Shadow Generator

About CSS Box Shadow Generator

The CSS Box Shadow Generator lets you visually design box-shadow effects and instantly copy production-ready CSS. Stack multiple shadow layers, choose from curated presets inspired by Material Design, Tailwind CSS, and Neumorphism, or drag directly on the preview to position your shadow. Everything runs in your browser — your code never leaves the page.

How to Use the CSS Box Shadow Generator

1. Adjust shadow controls — Use the sliders to set horizontal offset (X), vertical offset (Y), blur radius, and spread radius. You can also drag directly on the preview area to reposition the shadow intuitively.
2. Choose color and opacity — Pick a shadow color with the color picker and fine-tune transparency with the opacity slider. The preview updates in real time.
3. Add multiple layers or presets — Click + Add Shadow Layer to stack shadows for realistic depth. Or select a curated preset (Material, Tailwind, Neumorphism, etc.) to start with a proven design.
4. Copy the CSS — Click Copy to grab the generated box-shadow code and paste it directly into your stylesheet.

Understanding the box-shadow Syntax

Tips for Professional Box Shadows

• Layer multiple shadows — Real-world objects cast complex shadows. Using 2-3 layers (a soft ambient layer + a sharper key light layer) produces much more realistic results than a single shadow.
• Use low opacity — Shadows with 8-20% opacity look natural. Avoid high-opacity black shadows, which can appear harsh and dated.
• Match light direction — Keep shadow offsets consistent across your UI to simulate a single light source. Inconsistent shadows break the visual illusion.
• Colored shadows — Instead of black, try using a darker shade of the element's background color for a more cohesive, modern look.
• Negative spread — A negative spread value shrinks the shadow smaller than the element, creating a subtle contact shadow that grounds elements without visible edges.

Popular Shadow Styles Explained

• Material Design Elevation — Uses two shadow layers: a softer ambient shadow and a sharper key shadow. Different elevation levels (1-5) increase the offset and blur progressively.
• Tailwind CSS Utilities — Tailwind provides shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl classes, each using two-layer shadows optimized for common card and modal use cases.
• Neumorphism — Creates a soft, extruded plastic effect using two opposing shadows (one light, one dark). Works best on light gray backgrounds where both shadows are visible.
• Glassmorphism — Pairs a subtle shadow with backdrop-filter blur and semi-transparent backgrounds. The shadow adds depth beneath the frosted glass effect.

Frequently Asked Questions

What is the CSS box-shadow property?

The CSS box-shadow property adds shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. Multiple shadows can be comma-separated to create layered depth effects.

How do I create multiple box shadows in CSS?

Multiple box shadows are created by comma-separating each shadow definition. For example: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1). Each shadow is rendered on top of the previous one, with the first shadow appearing on top.

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

box-shadow applies shadow to the rectangular box of an element, while filter: drop-shadow() follows the actual shape including transparent areas. box-shadow supports spread radius and inset mode, which drop-shadow does not. For standard rectangular elements, box-shadow is more commonly used and performs better.

What is an inset box shadow?

An inset box shadow appears inside the element instead of outside. It is created by adding the inset keyword before the shadow values. Inset shadows are commonly used for pressed button effects, input field styling, and creating recessed or engraved appearances.

What are good box-shadow values for a subtle card effect?

A popular subtle card shadow uses two layers: 0 1px 3px rgba(0,0,0,0.12) for the close shadow and 0 1px 2px rgba(0,0,0,0.24) for definition. Tailwind CSS uses 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px -1px rgba(0,0,0,0.1) for its default shadow utility.