CSS Box Shadow Generator: Create Depth and Dimension with Live Preview

Box shadows are one of those CSS properties that look simple in theory but are surprisingly fiddly to get right by hand. The syntax takes six values (horizontal offset, vertical offset, blur radius, spread radius, color, and inset), and tweaking them blindly in a text editor is a slow trial-and-error loop.

The gap between a shadow that looks amateurish and one that looks polished is small but noticeable. Too much blur and it looks like a fuzzy cloud. Too little blur and it looks like a hard line. Wrong offset direction and the light source feels inconsistent with the rest of your design.

Visual shadow generators close this gap by letting you see the result as you adjust each value. Drag a slider, see the shadow change in real time. When it looks right, copy the CSS. The CSS Box Shadow Generator does exactly this, with support for multiple shadow layers, inset shadows, and live preview on different element shapes.

Understanding the Box Shadow Syntax

The full CSS box-shadow syntax is:

`css box-shadow: [inset] ; `

offset-x: horizontal displacement. Positive values push the shadow right, negative values push it left.

offset-y: vertical displacement. Positive values push the shadow down, negative values push it up. In most designs, shadows go slightly down and to the right, simulating a light source from the upper left.

blur-radius: how blurry the shadow edge is. 0px gives a hard, sharp shadow. Higher values create a softer, more diffused shadow. For subtle, modern shadows, use a blur radius 2-4x larger than the offset.

spread-radius: how much the shadow expands beyond the element. Positive values make the shadow larger than the element. Negative values make it smaller. Default is 0. Spread is useful for creating shadows that are visible on all sides or for creating borders that do not affect layout.

color: usually a semi-transparent black or dark color. rgba(0, 0, 0, 0.1) for subtle shadows, rgba(0, 0, 0, 0.3) for more prominent ones. Using colored shadows (matching the element's background) creates a more natural, less flat look.

inset: optional keyword that places the shadow inside the element instead of outside. Useful for pressed button states and input fields.

Example of a clean, modern card shadow: `css box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); `

This is Tailwind's shadow-md. It uses two layers with different sizes, which we will get to next.

Layered Shadows: The Secret to Realistic Depth

A single box-shadow layer looks flat and artificial. Real-world shadows are complex: they have a soft ambient component and a sharper directional component. CSS lets you mimic this by stacking multiple shadows on one element.

The technique is simple: separate multiple shadow declarations with commas.

`css 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), 0 16px 32px rgba(0, 0, 0, 0.07); `

Each layer doubles the offset and blur of the previous one, with a small opacity for each. The combined effect is a smooth, natural-looking shadow that transitions gradually from the element to the background. This looks far more realistic than a single shadow with high blur.

Another approach is to use two layers: a tight, sharp shadow for the "contact" area and a wide, soft shadow for the ambient light:

`css box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 6px 24px rgba(0, 0, 0, 0.08); `

The first shadow creates the impression that the element is sitting on the surface. The second creates the softer ambient shadow that gives it perceived elevation.

The CSS Box Shadow Generator lets you add multiple layers and adjust each independently, so you can experiment with different layering approaches without writing the CSS by hand.

Shadow Patterns for Common UI Elements

Cards: use soft, multi-layered shadows with small vertical offsets. Cards float slightly above the page surface. Increase shadow on hover to create a "lifting" effect: `css .card { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08); transition: box-shadow 0.2s; } .card:hover { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); } `

Buttons: minimal shadow in default state, slightly more on hover, inset shadow on active (pressed state): `css .btn { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); } .btn:hover { box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15); } .btn:active { box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.15); } `

Modals and dialogs: large, prominent shadows to create visual separation from the page content behind them: `css .modal { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.2); } `

Dropdowns and tooltips: medium shadows with a focus on the vertical offset, since these float above other content: `css .dropdown { box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15); } `

Input fields (focus state): colored shadow (matching your brand/accent color) instead of the default browser outline: `css .input:focus { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3); outline: none; } `

This last pattern uses spread with zero blur and offset to create a glowing ring effect, which is a popular focus indicator.

Colored Shadows and Advanced Techniques

Using black shadows is the default, but colored shadows create a more cohesive, modern look. The trick is to use a shadow color that matches or complements the element's background color:

`css .blue-card { background: #3b82f6; box-shadow: 0 8px 24px rgba(59, 130, 246, 0.4); } `

The shadow appears as a soft glow of the card's own color, as if the card is emitting light. This works especially well for buttons, badges, and accent elements.

For glassmorphism effects, combine box-shadow with backdrop-filter: blur() and semi-transparent backgrounds. The Glassmorphism Generator creates these combinations visually.

Neuomorphism (soft UI) uses inset and outset shadows in pairs to create an embossed or debossed look. The element appears to be extruded from or pressed into the background surface:

`css .neo-raised { box-shadow: 8px 8px 16px #d1d5db, -8px -8px 16px #ffffff; } .neo-pressed { box-shadow: inset 8px 8px 16px #d1d5db, inset -8px -8px 16px #ffffff; } `

The Neumorphism Generator simplifies creating these paired shadow effects. The challenge with neumorphism is accessibility: the low contrast between elements makes it hard for some users to distinguish interactive elements from decorative ones.

Another advanced technique is animating shadows. Since box-shadow is animatable with CSS transitions, you can create smooth elevation changes on hover, focus, and click. Keep transition durations short (150-250ms) for responsive feel.

Performance Considerations for Box Shadows

Box shadows are rendered by the GPU, and simple shadows have negligible performance impact. However, there are scenarios where shadows can cause jank:

Animating box-shadow directly. Changing the shadow values triggers a repaint on every frame. On complex pages with many elements, this can drop frame rates below 60fps. The workaround is to use a pseudo-element with the target shadow, then animate the pseudo-element's opacity instead:

`css .card { position: relative; } .card::after { content: ''; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.15); opacity: 0; transition: opacity 0.2s; } .card:hover::after { opacity: 1; } `

This is significantly smoother because opacity changes are composited by the GPU without repainting.

Too many shadow layers. Five or more layers on hundreds of elements (e.g., a long list of cards) can add up. In those cases, simplify to 1-2 layers or use a static shadow image.

Large blur radius on large elements. A blur radius of 100px on a full-width element renders a lot of pixels. Keep blur proportional to the element size.

For most websites, box-shadow performance is not a concern. It only becomes an issue with heavy animation or hundreds of shadowed elements visible simultaneously. Test on your target devices (especially low-end phones) if you are building something shadow-intensive.

FAQ

Can I use box-shadow to create a border without affecting layout?

Yes. Use spread with zero offset and zero blur: box-shadow: 0 0 0 2px #3b82f6;. This creates a 2px border around the element without adding to the element's size or affecting layout. Unlike CSS border, box-shadow does not change the element's dimensions. This is commonly used for focus indicators and outline effects.

How do I make a shadow appear on only one side of an element?

Use a combination of offset, blur, and negative spread. For a bottom-only shadow: box-shadow: 0 4px 6px -4px rgba(0, 0, 0, 0.3);. The negative spread pulls the shadow inward, and the positive y-offset pushes whatever remains downward. The result is a shadow visible only at the bottom edge.

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

box-shadow applies to the CSS box model (the rectangular box of the element). filter: drop-shadow() applies to the visual shape, including transparent areas. For images with transparent backgrounds (PNGs), drop-shadow follows the actual shape of the image. For standard rectangular elements, they look the same.

Do box shadows work in dark mode?

Shadows on dark backgrounds are tricky because dark-on-dark is hard to see. In dark mode, consider using lighter shadows (white or light gray with low opacity) or using border-based elevation instead of shadows. Some designs skip shadows entirely in dark mode and use subtle borders or background color differences to indicate elevation.