Box Shadow Generator

CSS Box Shadow Generator

Design perfect CSS box shadows with a real-time visual preview. Adjust horizontal and vertical offsets, blur radius, spread radius, color, and inset mode to create subtle or dramatic shadow effects, then copy the CSS code instantly.

• Adjust horizontal offset, vertical offset, blur radius, and spread radius
• Color picker for shadow color with alpha transparency support
• Toggle between outset and inset shadow modes
• Layer multiple shadows on a single element
• Live visual preview on a sample box element
• One-click copy of the generated CSS box-shadow property
• All processing happens locally in your browser

How to Create a CSS Box Shadow

1. 1

   Set the shadow offsets

   Use the sliders to adjust the horizontal and vertical offsets to position the shadow relative to the element.

2. 2

   Adjust blur and spread

   Increase the blur radius for softer shadows or the spread radius to expand the shadow area.

3. 3

   Choose color and inset

   Pick a shadow color with transparency using the color picker, and toggle inset if you want an inner shadow.

4. 4

   Preview and copy

   View the live preview and click copy to get the CSS box-shadow code for your project.

Frequently Asked Questions

Related Tools