// how-to guide

How to Generate a CSS Box Shadow

Design CSS box shadows visually with controls for offset, blur, spread, and color. Copy the generated CSS for your project.

1

Set the shadow offset

Adjust the horizontal and vertical offset sliders to position the shadow relative to the element. Positive values move the shadow right and down.
2

Configure blur and spread

Increase the blur radius for a softer shadow or the spread radius to make the shadow larger or smaller than the element.
3

Choose shadow color and opacity

Pick a shadow color and adjust the opacity. Using rgba values with lower opacity creates more subtle, natural-looking shadows.
4

Add multiple shadows

Layer multiple box shadows for more complex effects. Each shadow can have its own offset, blur, spread, and color values.
5

Copy the CSS

Copy the generated box-shadow CSS property and paste it into your stylesheet. The preview shows exactly how the shadow will appear.

Shadows are one of the most effective ways to create depth and visual hierarchy in a UI, but getting the values right by hand is tedious. The box shadow generator lets you dial in the exact look you want visually and then grab the CSS, instead of guessing at pixel values and refreshing the browser in a loop.

Understanding shadow design patterns

Different shadow styles communicate different things to users. A subtle shadow with a small offset and moderate blur (0 2px 8px rgba(0,0,0,0.1)) suggests a card that is slightly raised above the surface. This is the bread-and-butter shadow for card-based layouts. A larger, more diffuse shadow (0 12px 40px rgba(0,0,0,0.15)) makes an element feel like it is floating well above the page, which is useful for modals and dropdown menus.

Layered shadows produce the most realistic results. Instead of a single shadow, combine two or three: a tight, dark shadow for the hard edge close to the element, and a wider, lighter shadow for the ambient fill. This mimics how real-world light behaves and is the approach used by most modern design systems, including Material Design’s elevation model.

The inset keyword flips the shadow to the inside of the element, creating a pressed or recessed look. This is particularly effective for input fields and toggle buttons where you want to suggest that the element is set into the page rather than raised above it.

Tips and best practices

Use rgba() or hsla() for shadow colors instead of solid black. Pure black shadows look harsh and unnatural. Try rgba(0, 0, 0, 0.08) to rgba(0, 0, 0, 0.2) for most UI elements.
Match shadow direction across your entire UI. If your cards cast shadows down and to the right, every other shadowed element should do the same. Mixed light directions look disorienting.
Create shadow tokens in your design system. Define --shadow-sm, --shadow-md, and --shadow-lg as CSS custom properties so every developer uses consistent elevation levels.
Be mindful of performance. Large blur radii on many elements can cause repaint overhead, especially on lower-powered devices. Stick to moderate blur values for elements that appear frequently, like list items.
Pair shadows with subtle borders. On light backgrounds, a 1px border at low opacity combined with a shadow produces a crisper, more polished look than a shadow alone.

Common issues

Shadows look clipped: If a parent element has overflow: hidden, the shadow will be cut off at the parent’s boundary. Either remove the overflow rule or add padding to the parent to give the shadow room to render.
Shadow not visible on dark backgrounds: A dark shadow on a dark background is invisible. Switch to a lighter or colored shadow, such as rgba(255, 255, 255, 0.05), or use a colored glow like 0 0 20px rgba(59, 130, 246, 0.5).
Inconsistent rendering across browsers: While box-shadow itself is well-supported, the visual rendering of blur can differ slightly between engines. Always test your shadows on Chrome, Firefox, and Safari to ensure they look acceptable across the board.