Toolsvana→Design Tools→Box Shadow Generator

Box Shadow Generator

Generate CSS box-shadow properties

Shadow Layers

Shadow 1

Offset X: 0px

Offset Y: 4px

Blur: 6px

Spread: 0px

Color

Opacity: 10%

Inset shadow

Preset Shadows

Preview Element Color

Preview

CSS Code

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

Alternative Formats

CSS Class

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

Tailwind CSS (Approximate)

shadow

Tips

• Positive offset values move shadows down and right, negative values move them up and left

• Blur radius creates the softness of the shadow - higher values create more diffuse shadows

• Spread radius expands (positive) or contracts (negative) the shadow size

• Inset shadows create inner shadows for depth effects

• Multiple shadows can be layered for complex lighting effects

• Lower opacity values create more subtle, realistic shadows

About Box Shadow Generator

Our free CSS box shadow generator helps you create professional shadow effects with complete visual control. Adjust offset, blur radius, spread radius, color, and opacity using intuitive sliders and see the result update in real time. Layer multiple shadows together for complex depth effects that make your UI elements pop.

Shadows are essential for establishing visual hierarchy and depth in modern web interfaces. A well-crafted box-shadow can make cards appear to float above the page, buttons feel interactive, and navigation elements stand out from the background. This tool eliminates the trial-and-error of writing box-shadow values by hand.

The generator supports both outer and inset shadows, multiple shadow layers, and includes 6 preset templates for common shadow styles. Output is provided as CSS code with a one-click copy button, along with approximate Tailwind CSS utility class suggestions. All processing happens in your browser with no data sent to any server.

Key Features

Multiple shadow layers that can be added, removed, and individually configured
Precise slider controls for X offset, Y offset, blur radius, and spread radius
Color picker with hex input and adjustable opacity for each shadow layer
Inset shadow toggle for creating inner depth and embossed effects
6 preset shadow templates: Subtle, Medium, Large, Extra Large, Inner, and Multiple
Random shadow generator for discovering creative shadow combinations
Real-time live preview with customizable element color
One-click copy to clipboard with clean CSS output
Alternative format outputs including CSS class and approximate Tailwind CSS utility
Full dark mode support for comfortable editing in any lighting condition

How to Use the Box Shadow Generator

Add shadow layers: Start with the default shadow or click Add to create additional shadow layers for complex effects.
Adjust shadow properties: Use the sliders to set X/Y offset, blur radius, spread radius, color, and opacity for each shadow layer.
Toggle inset: Check the Inset checkbox on any shadow layer to create an inner shadow effect instead of an outer one.
Preview the result: View the live preview element to see exactly how your shadow looks. Change the preview element color if needed.
Try presets: Click any of the 6 preset templates to quickly apply common shadow styles as a starting point.
Copy the CSS: Click the Copy button to copy the complete box-shadow CSS declaration to your clipboard.

Use Cases

Card elevation: Add depth to card components so they appear to float above the page background.
Button hover states: Create shadow transitions for buttons that respond visually to user interaction.
Modal and dialog styling: Apply large, soft shadows to modals and dialog boxes for clear visual separation from the background.
Navigation dropdowns: Style dropdown menus and popovers with shadows that convey layering and depth.
Input focus effects: Use colored shadows as focus indicators for form inputs and interactive elements.
Inset effects: Create pressed or embossed looks for toggle buttons, active states, and decorative elements.
Neumorphism design: Combine multiple light and dark shadows to achieve the popular soft UI design aesthetic.
Image framing: Add subtle shadows to images and media containers for a polished gallery appearance.

Frequently Asked Questions

Is this tool free?

Yes, the Box Shadow Generator is completely free to use with no limits on the number of shadows you can create. No registration or payment is required.

Is my data secure?

All shadow generation and previewing happens entirely in your browser. No data is sent to any external server, so your configurations and CSS output remain completely private.

What is the difference between blur and spread radius?

Blur radius controls how soft or diffuse the shadow appears -- higher values create a more gradual fade. Spread radius expands (positive values) or shrinks (negative values) the size of the shadow relative to the element.

Can I use multiple shadows on one element?

Yes, CSS supports multiple box-shadows separated by commas. This tool lets you add multiple shadow layers and combines them automatically into a single box-shadow declaration.

What is an inset shadow?

An inset shadow renders inside the element rather than outside, creating an indented or pressed-in appearance. It is commonly used for input fields, active button states, and neumorphism designs.

Is box-shadow supported in all browsers?

Yes, the box-shadow property is fully supported in all modern browsers including Chrome, Firefox, Safari, Edge, and Opera. No vendor prefixes are needed.

Tips & Best Practices

Keep shadows subtle: Low opacity (5-15%) and moderate blur create realistic, professional shadows that do not overwhelm the design.
Use negative spread: A small negative spread radius makes shadows appear tighter and more focused beneath the element.
Layer multiple shadows: Combine a tight, dark shadow with a wider, lighter one for natural-looking depth similar to real-world lighting.
Match your light source: Keep offset directions consistent across your design to simulate a single, coherent light source.
Consider performance: Large blur values on many elements can impact rendering performance, especially on mobile devices.
Use shadows for hierarchy: Higher elevation (larger offset and blur) should indicate elements that are closer to the user in the visual stack.