Box Shadow Generator
Generate CSS box shadow code visually
Box Shadow Generator
Shadow Presets
How to Use
- Adjust horizontal and vertical offsets to position shadow
- Increase blur radius for softer shadows
- Use spread radius to expand or contract shadow
- Choose shadow color and opacity
- Toggle inset for inner shadows
- Copy the CSS code to use in your projects
Your Privacy is Protected
All processing happens entirely in your browser. No data is stored, transmitted, or tracked. Your information remains completely private and secure on your device.
About Box Shadow Generator
Create CSS box shadows visually with our interactive box shadow generator. Design perfect shadows for cards, buttons, modals, and any UI element with live preview and instant CSS code. Adjust horizontal and vertical offset, blur radius, spread radius, shadow color, opacity, and inset shadows all with visual controls. Essential for web designers creating depth in layouts, developers implementing Material Design shadows, UI designers prototyping shadow effects, and anyone needing box-shadow CSS without manual coding. Features include multiple shadow layers for complex effects, preset shadow styles (material design elevations, soft shadows, hard shadows), real-time preview on sample elements, and one-click CSS copying with browser compatibility.
Key Features
Visual Shadow Controls
Adjust all shadow properties with sliders and controls. See changes in real-time without touching code.
Multiple Shadow Layers
Stack multiple shadows for complex, realistic effects. Combine soft and hard shadows for depth and dimension.
Live Preview
Preview shadows on sample elements (cards, buttons) as you design. See exactly how shadows look before implementing.
Material Design Presets
Quick-select Material Design elevation shadows (elevation 1-24). Implement Material Design instantly.
Inset Shadows
Create inner shadows for pressed button effects, input fields, or depth illusions. Full inset shadow support.
Color and Opacity Control
Set shadow color with transparency. Create subtle or dramatic shadows with precise color and alpha control.
Copy CSS Code
One-click copy of complete box-shadow CSS. Includes vendor prefixes for maximum compatibility.
How to Use Box Shadow Generator
Adjust Horizontal Offset
Adjust horizontal offset (X) to move shadow left (negative values) or right (positive values). This determines the shadow's horizontal position.
Adjust Vertical Offset
Adjust vertical offset (Y) to move shadow up (negative values) or down (positive values). This controls the shadow's vertical position.
Set Blur Radius
Set blur radius for shadow softness. 0 creates a sharp shadow, while higher values create softer, more diffused shadows.
Set Spread Radius
Set spread radius to expand (positive) or contract (negative) the shadow size before blurring is applied.
Choose Color and Opacity
Choose shadow color and opacity for the perfect visual effect. Use rgba values for transparent shadows that blend with backgrounds.
Add Shadow Layers
Add more shadow layers if needed for complex, realistic effects. Multiple shadows create depth and dimension.
Copy CSS Code
Preview the shadow on different elements to ensure it looks right, then copy the generated CSS code to your clipboard.
Frequently Asked Questions
What do the box-shadow values mean?
box-shadow: horizontal-offset vertical-offset blur-radius spread-radius color. Example: 0px 4px 6px 0px rgba(0,0,0,0.1) means no horizontal offset, 4px down, 6px blur, no spread, 10% black shadow.
How do I create a soft, subtle shadow?
Use larger blur radius (15-30px), small offsets (2-4px), and low opacity black/gray (rgba(0,0,0,0.1) or rgba(0,0,0,0.05)). Soft shadows create gentle elevation without harsh edges.
What's the difference between blur and spread?
Blur radius controls shadow softness - higher blur = softer edges. Spread radius grows or shrinks the shadow size itself before blurring. Positive spread makes shadow larger, negative makes it smaller.
How do I create Material Design shadows?
Material Design uses multiple shadow layers: one sharp (low blur, slight offset) and one soft (higher blur, more offset). Example elevation 2: 0px 1px 3px rgba(0,0,0,0.12), 0px 1px 2px rgba(0,0,0,0.24). Use our Material Design presets.
What are inset shadows and when should I use them?
Inset shadows go inside the element instead of outside. Use for pressed button states, creating depth inside boxes, styling inputs to look recessed, or creating inner glow effects. Add 'inset' keyword in CSS.
Can I use multiple shadows on one element?
Yes! Separate shadows with commas: box-shadow: 0 2px 4px rgba(0,0,0,0.1), 0 8px 16px rgba(0,0,0,0.1); Layering shadows creates more realistic, dimensional effects than single shadows.
Do box shadows affect layout?
No. Shadows don't take up space in the document flow. They're purely visual effects that don't push other elements. However, very large shadows might visually overflow containers.
How do shadows affect performance?
CSS box-shadows are GPU-accelerated in modern browsers and perform well. However, many elements with complex multi-layer shadows can slow rendering. Optimize by minimizing shadow complexity and quantity on large lists.
Use Cases
- Card and Component Depth: Add depth to cards, panels, and sections. Shadows create visual hierarchy and separate elements from background for modern UI design.
- Button States and Interactions: Create hover effects, active states, and focus styles with shadows. Enhance buttons with elevation changes on interaction.
- Modal and Dropdown Overlays: Give modals, dropdowns, and tooltips proper elevation above page content. Strong shadows establish clear layering.
- Material Design Implementation: Implement Google's Material Design elevation system. Use preset elevations for consistent depth across applications.
- Form Input Styling: Create inset shadows for input fields, giving a recessed appearance. Enhance focus states with subtle outer shadows.