Box Shadow Generator

How to use

1. Adjust sliders — Tweak offset, blur, spread, and color
2. Preview — See the shadow on a live preview box
3. Copy CSS — Copy the box-shadow rule for your project

What Is a Box Shadow Generator?

A box shadow generator creates the CSS box-shadow property visually, letting you see the effect in real time as you adjust parameters. Instead of guessing pixel values, you can dial in the perfect shadow and copy production-ready CSS.

Understanding Box Shadow Parameters

• Horizontal offset: Positive values push the shadow right; negative values push left.
• Vertical offset: Positive values push the shadow down; negative values push up.
• Blur radius: Higher values create softer, more diffused shadows.
• Spread radius: Positive values expand the shadow; negative values shrink it.
• Color & opacity: Controls the shadow's color and transparency.

Shadow Design Patterns

Modern design uses layered, subtle shadows to create depth hierarchy. Cards typically use a small blur with low opacity. Floating elements like dropdowns use larger blur with moderate offset. Pressed buttons use inset shadows. The best shadows mimic natural light sources — typically from above.

Performance

Box shadows are GPU-accelerated in modern browsers and have minimal performance impact for static elements. However, animating box-shadow can cause repaints. For animated elements, consider using filter: drop-shadow() or pseudo-elements instead.

Privacy

All generation happens in your browser. Nothing is sent to any server.

Create gradients with the CSS Gradient Generator. Convert colors with the Color Converter.

Frequently asked questions

What is box-shadow?

CSS box-shadow adds shadow effects around an element's frame. You can set horizontal/vertical offset, blur radius, spread distance, and color.

What does 'inset' do?

The inset keyword changes the shadow from an outer shadow to an inner shadow, creating a pressed or recessed effect.

Can I have multiple shadows?

Yes. In CSS you can comma-separate multiple box-shadow values. Use this tool to generate each one individually.

Does box-shadow affect layout?

No. Shadows are purely visual and don't affect element dimensions or layout flow.

Related free tools

• Color Converter — Convert between HEX, RGB, and HSL color formats.
• CSS Gradient Generator — Create linear and radial CSS gradients with live preview.
• Border Radius Previewer — Preview and generate CSS border-radius values.
• Text Shadow Generator — Design CSS text shadows with a visual editor and live preview.
• Placeholder Image Generator — Generate placeholder images with custom size, color, and text.
• Color Palette Generator — Generate harmonious color palettes from any base color.
• Color Contrast Checker — Check WCAG 2.1 contrast ratio with AA / AAA pass marks for normal text, large text, and UI components.
• CSS Clamp Generator — Build fluid clamp() expressions for responsive typography and spacing — no media queries needed.
• Pixel to REM Converter — Live two-way px ↔ rem conversion with custom root font-size. Built for accessible, user-respecting design.
• Color Blindness Simulator — Preview images and UI through protanopia, deuteranopia, tritanopia, and achromatopsia simulations.
• CSS Unit Converter — Convert any CSS length unit to all others with customizable base font-size and viewport dimensions.
• CSS Triangle Generator — Generate pure-CSS triangles for tooltips, arrows, and speech bubbles. 8 directions, any size or color.