Box Shadow Generator

About Box Shadow Generator

Box shadows are one of the most effective ways to communicate depth and hierarchy in UI design, but writing them by hand means juggling four numeric values, an optional inset keyword, and an RGBA color — all in one declaration. The Box Shadow Generator lets you dial in offset, blur, spread, and opacity through sliders, so you see the result before committing a single character to your stylesheet. Stack multiple shadow layers to mimic realistic ambient and key lighting, the same technique used in Material Design elevation scales. Inset mode flips the shadow inward for pressed button states and recessed input wells. The color picker includes alpha control so you can build soft, photorealistic shadows without harsh dark borders. Once satisfied, copy the vendor-clean declaration straight to your CSS or design token file.

Why use Box Shadow Generator

How to use Box Shadow Generator

1. Set the horizontal and vertical offset sliders to position the shadow light source
2. Drag the blur radius slider to soften or sharpen the shadow edge
3. Adjust spread to grow the shadow footprint or use negative values to tighten it
4. Open the color picker, choose a shadow color, and lower alpha for natural depth
5. Toggle the Inset switch to create an inner shadow for pressed or recessed elements
6. Click Copy CSS to grab the finished box-shadow declaration for your stylesheet

When to use Box Shadow Generator

• When building a card component and need consistent, realistic elevation across multiple surface levels
• When styling a modal or drawer that must float visually above the page content
• When designing a pressed or active button state that needs an inset shadow instead of a raised one
• When creating a design-system elevation scale and need reproducible shadow tokens
• When porting a Figma design to CSS and the shadow values aren't obvious from the design file
• When adding depth to a dark-mode UI and need translucent shadows that don't look muddy

Examples

Tips

• Stack two shadows — one tight (0 2px 4px, low opacity) for close contact and one diffuse (0 8px 24px, lower opacity) for ambient — to get realistic depth without a heavy look
• Keep the y-offset larger than the x-offset to simulate overhead lighting, which matches how users expect light to fall in most UI contexts
• Stay in the 0.06–0.15 alpha range for outer shadows; darker values look painted-on rather than natural
• Negative spread values shrink the shadow footprint before blurring, useful for creating a soft glow that stays close to the element edge
• Store finalized shadow values as CSS custom properties like --elevation-1 and --elevation-2 so your entire design system stays consistent

Frequently Asked Questions

Explore the category

Glossary

Offset

The x and y values that shift a shadow horizontally and vertically from the element. Positive x moves the shadow right; positive y moves it down.

Blur Radius

Controls the softness of the shadow edge. A value of 0 produces a sharp, solid shadow; higher values create a progressively more diffuse and feathered edge.

Spread Radius

Expands or contracts the shadow uniformly in all directions before blurring. Positive values enlarge the shadow; negative values shrink it.

Inset Shadow

A box-shadow with the inset keyword renders inside the element's border box, making content appear recessed or pressed rather than elevated.

RGBA

A color format specifying Red, Green, Blue, and Alpha (opacity) channels. Alpha ranges from 0 (fully transparent) to 1 (fully opaque) and is essential for soft, natural shadow colors.

Elevation

In design systems like Material Design, elevation is a scale of box-shadow values that communicates how high above the base surface a component appears to float.