Box Shadow Generator
Generate CSS box-shadow properties
Shadow layers
Shadow 1
Preset shadows
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 or contracts 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.
Live preview
Preview scale: 100%
CSS declaration
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);CSS class
.shadow {
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
}Tailwind CSS (approximate)
shadowThis is a style suggestion. Custom offsets, colors, inset and multiple layers need the generated CSS.
Adjust a layer or try a preset. The preview updates as you work.
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. The preview updates as you move each slider.
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
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.