Box Shadow Generator

Design CSS box shadows with a live visual editor. Add multiple shadows, adjust offsets, blur, and spread.

4px
4px
10px
0px
box-shadow: 4px 4px 10px 0px #0000004d;

What Is the Box Shadow Generator?

The Box Shadow Generator is a visual CSS tool that lets you design box shadows without writing code manually. Adjust offsets, blur, spread, and color with intuitive sliders and see the result instantly. The tool supports multiple shadow layers and inset shadows, covering every common shadow pattern in web design.

How to Use the Box Shadow Generator

Start with the default shadow and use the sliders to adjust it to your liking. The preview box updates in real time so you can see exactly how the shadow looks.

  • Drag the X Offset slider to move the shadow left or right.
  • Drag the Y Offset slider to move the shadow up or down.
  • Adjust the Blur slider to control the softness of the shadow edges.
  • Adjust the Spread slider to grow or shrink the shadow size.
  • Pick a shadow color using the color picker or enter a hex value.
  • Check the Inset toggle to place the shadow inside the element.

To add a second shadow layer, click "+ Add" and configure it separately. You can have as many shadow layers as you need. Click the X icon on a shadow tab to remove it.

Tips for Effective Box Shadows

Subtle shadows create depth without overwhelming the design. For card-style elevation, use a small Y offset with moderate blur and low-opacity black. For dramatic effects, increase the blur and offset values. Layering two or three shadows at different sizes often produces more realistic depth than a single heavy shadow.

Inset shadows are useful for creating pressed button states, input focus rings, and neumorphic design patterns. Combine an inset shadow with an outer shadow for a polished, three-dimensional appearance.

Common Use Cases

  • Card and panel elevation in dashboard layouts.
  • Button hover and active states with layered shadows.
  • Input field focus effects using inset shadows.
  • Modal and popup depth effects.
  • Neumorphic UI design with combined inset and outer shadows.

Why Use a Box Shadow Generator?

The box-shadow CSS property has five values to coordinate: X offset, Y offset, blur, spread, and color. Getting these right by hand requires constant browser refreshes. This generator lets you experiment visually and copy clean CSS code when you are satisfied, saving time and reducing guesswork.

Frequently Asked Questions

How do I create a CSS box shadow?+
Use the sliders to set X offset, Y offset, blur radius, and spread. Choose a shadow color and toggle the inset option if needed. The tool generates the CSS code automatically and shows a live preview.
Can I add multiple box shadows to one element?+
Yes. Click the '+ Add' button to create additional shadow layers. Each shadow has independent controls for offset, blur, spread, color, and inset. Multiple shadows are combined into a single CSS property.
What is an inset box shadow?+
An inset box shadow renders inside the element instead of outside. It creates a pressed or recessed appearance, commonly used for input fields, cards, and neumorphic design patterns.
What is the difference between blur and spread in box-shadow?+
Blur controls how soft or diffused the shadow edges appear. Spread controls the size of the shadow; positive values make it larger than the element, while negative values make it smaller.
How do I make a subtle, modern box shadow?+
Use a small Y offset (4-8px), moderate blur (10-20px), zero spread, and a semi-transparent black color like rgba(0,0,0,0.1). This produces the soft, elevated look common in modern UI design.
Can I copy the generated box-shadow CSS?+
Yes. The generated CSS code is displayed below the preview. Click the copy button to copy it to your clipboard and paste it directly into your stylesheet or component.

Related Tools

CSS Gradient GeneratorColor Palette GeneratorImage Color PickerMarkdown Preview

Box Shadow Generator — free online css box shadow generator, box shadow css, drop shadow generator, css shadow effects, inset shadow css, multiple box shadows, box shadow designer, css shadow code. No signup required. Works in your browser.