DevToolKit

CSS Box Shadow Generator

Design advanced multi-layer CSS box shadows visually. Supports inset shadows, real-time color picking, opacity controls, and instant code export.

Card Preview

CSS Property

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -1px rgba(0, 0, 0, 0.06);

Shadow Layers

Outset Layer 10px 4px 6px
Outset Layer 20px 2px 4px

Layer 1 Settings

Adjust offset, blur, and spread
0px
4px
6px
-1px
0.1
Quick Presets
Was this tool helpful?

How to Use

Designing professional elevation is intuitive with our multi-layer builder:

Generator Guide

  1. Manage Layers: Use the Add Layer button to stack multiple effects. Click any layer in the list to edit its specific properties.
  2. Adjust Offsets: Move the X and Y sliders to position the shadow relative to the element.
  3. Refine Softness: Use Blur to diffuse the edge and Spread to grow or shrink the shadow volume.
  4. Select Colors: Change the shadow color and Opacity to match your design system's palette.
  5. Custom Scene: Change the background and card colors in the preview area to see how the shadow behaves on different surfaces.
  6. Export: Copy the final box-shadow CSS property from the output box.

About This Tool

Elevation & Depth

In modern UI design, shadows do more than just look pretty — they provide critical spatial cues. Depth helps users understand which elements are interactive and how the interface is structured hierarchically.

Our generator provides granular control over the CSS box-shadow property, enabling you to build everything from subtle "soft-UI" shadows to vibrant neon glows and layered material-style elevation.

FAQ

What are layered box shadows?
Layered box shadows use multiple 'box-shadow' declarations separated by commas. This technique is used by top design systems (like Tailwind or Material Design) to create smoother, more realistic elevation effects than a single shadow could achieve.
What does the 'inset' toggle do?
An inset shadow is drawn inside the element's frame rather than outside. This creates a 'sunken' or 'pressed' effect, often used for form inputs or buttons in a depressed state.
How do I use multiple layers?
Our tool allows you to add, remove, and edit independent layers. Each layer contributes to the final effect. Top layers in the list are rendered 'on top' of lower layers in the stack.
Can I use RGBA colors?
Yes. The tool automatically converts your hex colors and opacity settings into the standard 'rgba()' format required for CSS box-shadow transparency.
NavigateOpenEscClose