Box Shadow Generator

CSS Box Shadow Generator - Create Stunning Shadow Effects

A powerful CSS box-shadow generator that creates beautiful shadow effects with live preview. Features multiple shadow layers, customizable blur, spread, and offset values, opacity control, and preset shadow styles. Perfect for web designers and developers.

What is CSS box-shadow?

CSS box-shadow is a property that adds shadow effects around an element's frame. It creates depth and visual interest in web design.

Syntax:
box-shadow: offset-x offset-y blur spread color;

Components:
- offset-x: Horizontal shadow position
- offset-y: Vertical shadow position
- blur: Blur radius (softness)
- spread: Shadow size expansion
- color: Shadow color (supports rgba for opacity)
- inset: Optional keyword for inner shadow

Example:
box-shadow: 10px 10px 20px rgba(0,0,0,0.3);

Benefits:
- No images needed
- Hardware accelerated
- Multiple shadows supported
- Animatable with CSS transitions

How do I create multiple shadow layers?

Multiple shadows create depth and realism:

Method:
1. Click 'Add Shadow' button
2. Configure each layer separately
3. Layers stack in order

Example CSS:
box-shadow:
0 2px 4px rgba(0,0,0,0.1),
0 8px 16px rgba(0,0,0,0.1),
0 16px 32px rgba(0,0,0,0.1);

Layered Shadow Tips:
- Use decreasing opacity
- Increase blur with distance
- Keep colors consistent
- 2-4 layers usually enough

Popular Techniques:
- Elevation shadows (Material Design)
- Soft UI (Neumorphism)
- Glow effects
- 3D depth illusion

What is the difference between blur and spread?

Blur and spread control different aspects:

Blur Radius:
- Controls shadow softness
- Higher value = softer edges
- 0 = sharp shadow
- Affects gradient of shadow
- Most common adjustment

Spread Radius:
- Controls shadow size
- Positive = larger shadow
- Negative = smaller shadow
- 0 = same size as element
- Expands/contracts evenly

Examples:
Sharp shadow: blur: 0, spread: 0
Soft shadow: blur: 20px, spread: 0
Glow effect: blur: 20px, spread: 5px
Floating: blur: 40px, spread: -10px

Combined Usage:
- Subtle: low blur, no spread
- Dramatic: high blur, slight spread
- Floating: high blur, negative spread

When should I use inset shadows?

Inset shadows appear inside the element:

Use Cases:
- Pressed button states
- Input field styling
- Neumorphism design
- Inner depth effects
- Recessed elements

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

Design Tips:
- Combine with outer shadow for 3D
- Use for :active button states
- Great for form inputs
- Creates 'carved' look

Examples:
Pressed button:
inset 0 2px 4px rgba(0,0,0,0.3)

Neumorphism:
box-shadow:
inset 5px 5px 10px #d1d1d1,
inset -5px -5px 10px #ffffff;

Note: Inset shadows don't work with images or replaced elements.

How do I create popular shadow effects?

Popular shadow styles:

Material Design Elevation:
- Shadow 1: 0 1px 3px rgba(0,0,0,0.12)
- Shadow 2: 0 1px 2px rgba(0,0,0,0.24)
Combined for subtle depth

Floating Card:
0 20px 40px -10px rgba(0,0,0,0.2)
Negative spread creates floating effect

Neon Glow:
0 0 20px #ff00ff,
0 0 40px #ff00ff
Same color, increasing blur

Soft Shadow:
0 10px 30px rgba(0,0,0,0.1)
Large blur, low opacity

Hard Shadow:
5px 5px 0 #000
No blur for retro look

Neumorphism:
box-shadow:
10px 10px 20px #d1d1d1,
-10px -10px 20px #ffffff;
Opposite directions, light/dark colors

This tool includes these presets for quick use!

How do I convert this shadow to Tailwind or React?

Use the format selector above the code box to switch between CSS, Tailwind and React output. The Copy button copies whichever format is active.

Tailwind (arbitrary value):
Tailwind forbids spaces inside arbitrary values, so spaces inside a layer become underscores while commas keep multiple layers together:
shadow-[0_10px_30px_rgba(0,0,0,0.2)]
The tool also outputs matching bg-[...] and rounded-[...] classes.

React / JSX (inline style object):
JSX needs a camelCase key and a quoted string value:
style={{ boxShadow: '0 10px 30px rgba(0,0,0,0.2)', backgroundColor: '#ffffff', borderRadius: 8 }}

Multi-layer and inset shadows serialize correctly in all three formats, so you can paste straight into a stylesheet, a Tailwind class, or a component.

Why does my shadow look different across browsers or on retina screens?

Small rendering differences are normal and usually fine:

- Sub-pixel rounding: blur and spread are rasterized differently per engine. On retina (2x/3x) displays a 1px hairline shadow may appear softer; nudge blur or use whole-pixel offsets to stay crisp.
- Color spaces: rgba() is interpreted in sRGB everywhere, so prefer rgba/hex over named colors for consistency.
- box-shadow vs filter: drop-shadow(): box-shadow follows the element's rectangular border-box (even with border-radius). For non-rectangular shapes (PNGs with transparency, clip-path, SVG icons) use filter: drop-shadow() instead, which traces the actual alpha outline.

Accessibility tip: shadows are decorative. Never rely on a shadow alone to convey state (focus, error) - pair it with a visible border or color change and keep enough contrast for low-vision users.

Performance: very large blur radii are expensive to repaint, especially when animated. Avoid animating box-shadow directly on large/scrolling elements; animate a pseudo-element's opacity, or hint the compositor with will-change: transform - but only on the few elements that actually need it, since will-change costs memory.

Key Features

• Live preview with instant updates
• Adjust horizontal and vertical offset
• Control blur and spread radius
• Customize shadow color and opacity
• Toggle inset/outset shadows
• Add multiple shadow layers
• 8 preset shadow styles
• Customize box color and border radius
• Copy ready-to-use CSS code
• RGBA color support for transparency
• Material Design shadow presets
• Neumorphism and glow effects
• 100% client-side processing
• No server communication
• Works offline
• Dark mode support
• Mobile-friendly interface