CSS Box Shadow Generator — Live Preview & Multi-Layer

How CSS Box Shadow Works — All 6 Values Explained

The box-shadow property accepts up to six values that together describe the position, size, spread, color, and type of shadow. Understanding what each value does helps you produce exactly the effect you want rather than guessing with trial and error.

1. Horizontal offset (x). A positive value moves the shadow to the right; negative moves it left. A value of 0 centers the shadow horizontally under the element. This is the first numeric value in the property.

2. Vertical offset (y). Positive moves the shadow downward — simulating light from above — while negative moves it upward. Combined with horizontal offset, this determines the apparent direction of the light source.

3. Blur radius. Controls how soft the shadow edges are. A value of 0 produces hard, sharp edges (like a physical stencil). Larger values produce more diffuse, Gaussian-blurred shadows. The blur radius cannot be negative. Values above 60–80px on small elements can look unrealistic without increasing spread.

4. Spread radius. Expands or contracts the shadow in all directions before blurring. A positive value makes the shadow larger than the element; negative makes it smaller. Spread is the secret to "tight" vs "diffuse" shadows. A spread of -4px with a large blur produces natural-looking soft shadows that don't extend too far.

5. Color. Any valid CSS color — named, HEX, RGB, RGBA, HSL, or OKLCH. The alpha channel controls transparency, which has a large effect on realism. Shadows in real life are never fully opaque — typical values are 0.08–0.25 alpha for natural shadows, and up to 0.5–0.8 for dramatic or colored effects.

6. Inset keyword (optional). When present, the shadow is rendered inside the element rather than outside. Inset shadows are useful for pressed/active button states, input focus effects, inner glow highlights, and neumorphic components. Without inset, the shadow is an outer (drop) shadow.

Inset vs Outer Shadows — When to Use Each

The choice between inset and outer shadows goes beyond visual preference — it communicates depth and interaction state to the user.

Outer shadows make elements appear elevated above the page surface. A button with a soft outer shadow on an otherwise flat page reads as interactive — something to press. Cards with outer shadows create a visual hierarchy that separates content from backgrounds. The size of the shadow suggests the height of elevation: a 2px shadow is barely lifted; a 25px shadow is significantly raised.

Inset shadows push elements inward, making them look recessed or pressed. They are ideal for: active and pressed button states (the button visually "clicks in"), input fields that should look like holes in the surface, wells and panels with a sunken appearance, and neumorphic designs that combine both shadow types to create a soft, tactile feel.

Combining both: You can apply multiple shadows — some outer, some inset — to the same element. This is the foundation of neumorphism, where a light shadow on the top-left and a dark shadow on the bottom-right create the illusion of a three-dimensional bump, and adding inset shadows in the opposite corners produces the "pressed" state.

Use our CSS Gradient Generator alongside box shadows for advanced background effects — gradients and shadows complement each other in glassmorphism and bento-grid designs.

Multiple Shadow Layers for Depth Effects

CSS box-shadow accepts a comma-separated list of shadows, all rendered on the same element. Layering is a professional technique that creates far more realistic and polished shadows than any single-layer shadow can achieve.

Why single shadows look artificial. A real-world shadow is not a uniform blur — light wraps around objects, creating a tight, dark shadow close to the surface and a diffuse, lighter shadow further out. A single CSS shadow is a simplified approximation. Layering two or three shadows at different sizes, opacities, and offsets mimics this physical behaviour.

A professional layered shadow recipe:

box-shadow:
  0px 1px 2px rgba(0, 0, 0, 0.07),   /* tight, dark, close */
  0px 4px 8px -2px rgba(0, 0, 0, 0.09), /* medium distance */
  0px 12px 20px -4px rgba(0, 0, 0, 0.09); /* diffuse, far */

This three-layer approach (small/tight + medium + large/diffuse) is used by Notion, Linear, Vercel, and most modern SaaS design systems. The negative spread values on the outer layers prevent the shadow from extending too wide at large blur radii.

Coloured shadows are another creative use of layering. Drop a vivid colour shadow below your primary shadow to create depth with brand personality — common in landing pages and hero sections. Our tool supports up to five layers simultaneously with individual enable/disable toggles for easy A/B testing.

Box Shadow vs Drop Shadow vs Filter Shadow in CSS

CSS offers three ways to add shadows to elements, each with different capabilities and trade-offs.

box-shadow. Applies to the element's rectangular box — it follows the border-box, not the element's actual shape. Works on all HTML elements. Supports multiple layers, inset, spread, and any color. Renders on the GPU in most browsers and is generally performant. Cannot follow non-rectangular shapes (it does not respect transparent areas of images or border-radius for the shadow path — only the box).

filter: drop-shadow(). Part of CSS Filters, this renders a shadow based on the element's actual rendered pixels — including transparency. A PNG with a transparent background will have its shadow follow the shape of the content, not the rectangular bounding box. Supports offset, blur, and color, but not spread or inset. Computationally more expensive than box-shadow since it analyses every pixel.

text-shadow. Applied specifically to text content — not the element box. Useful for legibility on complex backgrounds, embossed text effects, and neon glow effects. Does not support spread radius or inset. Each text-shadow follows individual character outlines.

Choosing the right shadow: Use box-shadowfor cards, buttons, modals, and any rectangular UI element. Use filter: drop-shadow() for icons, logos, and images with non-rectangular visible shapes. Use text-shadow for typographic effects. Our box shadow generator covers the most common use case.

Neumorphism and Glassmorphism Design Trends

Two of the most distinctive shadow-dependent design trends of the 2020s are neumorphism and glassmorphism. Both rely heavily on box-shadow for their visual identity.

Neumorphism (soft UI). Emerged around 2020 as a reaction to flat design. Elements appear as if extruded from the background material — part of the surface rather than floating above it. The signature technique: two shadows, one lighter than the background in the top-left corner, one darker in the bottom-right, both with the same background color. The background and element colors must match for the illusion to work.

/* Neumorphic raised state — background #e0e5ec */
box-shadow:
  -6px -6px 12px rgba(255, 255, 255, 0.8),
  6px 6px 12px rgba(0, 0, 0, 0.10);

/* Neumorphic pressed state */
box-shadow:
  inset -3px -3px 8px rgba(255, 255, 255, 0.6),
  inset 3px 3px 8px rgba(0, 0, 0, 0.10);

Glassmorphism. Popularised by Apple's macOS Big Sur, this trend combines frosted glass effects (backdrop-filter: blur), semi-transparent backgrounds, and subtle borders with a light box-shadow to lift the card off the background. The shadow in glassmorphism is typically very soft, light-coloured, and acts as a rim light rather than a depth shadow.

Both trends are niche — neumorphism has significant accessibility problems (low contrast by design) and glassmorphism is computationally expensive on large surfaces. Use them as accent patterns for hero sections, cards, and feature callouts rather than for entire interfaces. Pair with our Contrast Checker to ensure neumorphic designs maintain readable contrast ratios.

Performance Impact of Box Shadows

CSS box shadows are one of the more expensive visual properties from a rendering perspective, but modern browsers handle them well within reasonable limits. Understanding the performance trade-offs helps you make informed decisions for animation-heavy interfaces.

How browsers render shadows. Box shadows trigger the compositing stage of the rendering pipeline. When a shadow changes (on hover, during animation), the browser must repaint the affected area. Large blur radii and multiple layers compound the paint cost. On low-powered devices and mobile, this can cause janky animations at 60fps.

Animating shadows efficiently. Instead of animating box-shadow directly, a common trick is to place the target shadow on a ::after pseudo-element and animate its opacity. Opacity changes are GPU-composited and do not cause repaints. This gives the appearance of a smooth shadow transition at a fraction of the cost.

.card { position: relative; }
.card::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.25);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.card:hover::after { opacity: 1; }

Practical limits: One to three shadow layers on non-animated elements is virtually free. Animating one shadow layer on hover is acceptable. Avoid animating large, multi-layer shadows on elements that cover significant viewport area. Use will-change: box-shadow sparingly — it promotes elements to their own GPU layer which can increase memory usage. For most UI use cases, performance should not be a concern unless you are building highly interactive, animation-heavy interfaces.

Frequently Asked Questions