Home > Design Tools > CSS Box Shadow Generator

🎨 CSS Box Shadow Generator

Visual shadow property creator with real-time preview. Design perfect shadows for your web projects.

Shadow Controls

Horizontal Offset 10px

Vertical Offset 10px

Blur Radius 20px

Spread Radius 0px

Shadow Color #000000

Inset Shadow (inner shadow)

Multiple Shadows

Live Preview

CSS Code

box-shadow: 10px 10px 20px 0px #000000;

CSS Box Shadow Generator: Create Beautiful Shadow Effects

Our CSS Box Shadow Generator is a free online tool that helps web designers and developers create beautiful shadow effects for their projects. With real-time preview and intuitive controls, you can design perfect shadows for buttons, cards, modals, and other UI elements.

What is CSS Box Shadow?

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects separated by commas. A box shadow is described by X and Y offsets relative to the element, blur and spread radii, and color.

Key Features of Our Box Shadow Generator

• Real-time Preview: See changes instantly as you adjust settings
• Complete Control: Adjust horizontal/vertical offset, blur, spread, and color
• Inset Shadows: Create inner shadows for pressed/embedded effects
• Multiple Shadows: Combine multiple shadow effects for depth
• Instant CSS Code: Get ready-to-use CSS code with one click
• Mobile Responsive: Works perfectly on all devices

Common Use Cases for Box Shadows

• Card Design: Add depth to card components with subtle shadows
• Button Effects: Create interactive buttons with hover shadow effects
• Modal Windows: Make modals stand out with floating shadow effects
• Navigation Bars: Add separation between header and content
• Image Frames: Create photo gallery effects with shadow borders

CSS Box Shadow Syntax Explained

The basic syntax for CSS box-shadow is:

box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];

• Horizontal Offset: Positive values move shadow right, negative left
• Vertical Offset: Positive values move shadow down, negative up
• Blur Radius: Higher values create softer, more blurred shadows
• Spread Radius: Positive values expand the shadow, negative shrink
• Color: Any valid CSS color value (hex, rgb, rgba, hsl, etc.)

How to Use This Generator

Adjust the sliders to customize your shadow effect. The preview updates in real-time, and the CSS code is automatically generated for you to copy and use in your projects.

Subtle Elevation

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

Deep Shadow

box-shadow: 0 10px 25px rgba(0, 0, 0, 0.2);

Inset Effect

box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);

Multiple Shadows

box-shadow: 0 2px 4px #667eea, 0 8px 16px #764ba2;