CSS Box Shadow Generator

What You Get

How Box Shadow Generator Works

1. Start with a preset or blank layer. Click any preset card to load a pre-configured shadow, or click the Add Shadow Layer button to start from scratch. Each layer appears as an expandable panel with its own controls for offset, blur, spread, color, opacity, and inset mode.
2. Adjust the shadow parameters. Drag the horizontal and vertical offset sliders to position the shadow relative to the element. Increase the blur radius for a softer edge, or increase the spread to make the shadow larger than the element. Pick a shadow color and adjust the opacity slider for transparency. Toggle the inset switch to create an inner shadow effect.
3. Stack multiple layers. Click Add Shadow Layer to create additional shadows on the same element. Each layer is rendered in order, with the first layer on top. Combine outer and inset shadows, or blend different colors and offsets to achieve depth, glow, or neumorphic effects.
4. Copy the CSS. The CSS output panel at the bottom shows the complete box-shadow declaration in real time. Click the Copy CSS button to send it to your clipboard, ready to paste into your stylesheet or component code.

Understanding CSS Box Shadow

The CSS box-shadow property is one of the most versatile visual tools available to front-end developers. It adds one or more shadow effects to the bounding box of an element, creating depth and dimension that transform flat interfaces into layered, tactile experiences. The property accepts a comma-separated list of shadow values, each defined by up to six components: an optional inset keyword, horizontal offset, vertical offset, blur radius, spread radius, and color. When no inset keyword is present the shadow falls outside the element, which is the default behavior most developers encounter first. Positive horizontal offset values push the shadow to the right, while negative values move it left. Similarly, positive vertical offset pushes the shadow downward and negative values raise it upward. The blur radius determines how gradually the shadow fades from its solid center to transparent edges, and the spread radius expands or contracts the shadow relative to the size of the element itself.

Layered shadows are where the property truly shines. By combining multiple shadow definitions separated by commas, you can simulate realistic lighting scenarios, create glowing outlines, or build the increasingly popular neumorphism aesthetic. Neumorphic designs rely on pairing a light shadow directed toward the light source with a dark shadow on the opposite side, both applied to an element whose background color closely matches its parent. The result is a soft, extruded appearance that suggests physical depth without hard edges. Performance considerations are minimal for static shadows because modern browsers handle them efficiently at the compositor level. However, animating box-shadow values directly triggers repaints, which can cause frame drops on complex pages. A common optimization technique is to place the desired end-state shadow on a pseudo-element, then transition only the opacity of that pseudo-element, avoiding the costly per-frame shadow recalculation.

Design systems benefit from defining shadow tokens as CSS custom properties. Variables such as --shadow-sm, --shadow-md, and --shadow-lg establish a consistent elevation scale that all components can reference. This approach simplifies dark mode adaptation because you only need to adjust the shadow color variables rather than rewriting every box-shadow declaration. When choosing shadow colors, avoid pure black shadows in light themes. Instead, use a slightly tinted, semi-transparent color that complements your palette. A blue-tinted shadow on a cool-toned interface or a warm brownish shadow on a cream background produces a more natural and polished result than rgba(0,0,0,0.3) ever will. The tool on this page lets you experiment with all of these techniques visually, generating copy-ready CSS so you can spend less time on syntax and more time on design.

Shadow Design Principles

Shadows are not merely decorative effects. They communicate spatial relationships, establish visual hierarchy, and guide the user's eye to interactive elements. Understanding the principles behind shadow design helps you create interfaces that feel intuitive and polished.

Elevation and Depth

Google's Material Design introduced a formalized elevation system where each UI layer sits at a specific height above the base surface. Higher elements cast larger, softer shadows. This system uses six elevation levels (0dp through 24dp), each with precisely defined shadow values. The key insight is that shadow offset, blur radius, and opacity should all increase together as elevation rises. A card at 2dp might use 0 1px 3px rgba(0,0,0,0.12), while a modal dialog at 24dp uses 0 11px 15px rgba(0,0,0,0.2).

Shadow as Interactive Feedback

Shadows can respond to user actions to reinforce interactivity. A button that gains a deeper shadow on hover signals that it is clickable and has "lifted" toward the user. A pressed state that reduces or removes the shadow communicates that the button has been pushed down. This physical metaphor is universally understood and reduces the need for explicit affordance labels. Transition the box-shadow property over 150 to 200 milliseconds for a smooth, responsive feel.

Accessibility Considerations

Never rely on shadow alone to indicate element boundaries or states. Users with low vision or high-contrast display settings may not perceive shadows at all, since most operating-system high-contrast modes strip box shadows entirely. Always pair shadows with borders, background color differences, or other visible indicators. Additionally, avoid extremely dark or opaque shadows on light backgrounds, as they can create distracting visual noise for users with certain visual processing sensitivities. Subtle shadows with opacity between 0.08 and 0.2 generally strike the best balance between visible depth and visual comfort.

How This Tool Compares

Tools That Pair Well