How to Create CSS Box Shadows with a Visual Tool

CSS box shadows add depth and elevation to web design elements. They create drop shadows, inner shadows, and layered shadow effects that make buttons, cards, and modals stand out. The box-shadow property has multiple parameters — offsets, blur, spread, color, and inset mode — that can be tricky to hand-code. Visual editors let you design shadows interactively and see results in real-time. This guide shows you how to create CSS box shadows using fixie.tools — a free visual shadow generator with live preview and instant code export.

Step 1: Open the Box Shadow Generator

Go to fixie.tools/box-shadow in your browser. The tool works entirely in your browser with no server processing. You'll see a preview element with the box shadow applied in real-time as you adjust settings.

Step 2: Adjust Horizontal and Vertical Offset

Set the X offset (horizontal shift) and Y offset (vertical shift) using the sliders. Positive X moves the shadow right, negative moves it left. Positive Y moves the shadow down, negative moves it up. For typical drop shadows, use 0-10px horizontal and 5-20px vertical to simulate light from above. For centered glows, use 0px for both offsets.

Step 3: Configure Blur and Spread

Blur radius controls how soft the shadow appears. Higher blur (10-30px) creates soft, diffused shadows. Lower blur (0-5px) creates sharp, hard-edged shadows. Spread radius expands or contracts the shadow before blurring. Positive spread makes shadows larger, negative makes them smaller. For realistic shadows, use moderate blur with minimal spread.

Step 4: Set Shadow Color and Opacity

Choose the shadow color and transparency. Most shadows use semi-transparent black (rgba(0,0,0,0.1-0.3)) for subtle, realistic effects. Darker opacity (0.3-0.5) creates stronger shadows for elevated elements. Lighter opacity (0.05-0.15) creates subtle shadows for cards and containers. You can also use colored shadows for creative effects like glows.

Step 5: Add Multiple Shadows and Copy CSS

Click to add additional shadow layers for complex effects like elevated cards with both drop shadow and inner highlight. Toggle inset mode to create inner shadows that appear carved into the element. The tool generates complete CSS code combining all layers. Click Copy to copy the box-shadow CSS to your clipboard and paste it into your stylesheet.

Try It Now — Free, No Signup →

Frequently Asked Questions

What's the difference between drop shadows and inner shadows?

Drop shadows (default mode) appear outside the element, creating the illusion that it's elevated above the page. Inner shadows (inset mode) appear inside the element's borders, creating the illusion that it's carved into or recessed below the page surface. Use drop shadows for cards, buttons, and floating elements. Use inner shadows for input fields, wells, and pressed button states.

How do I create realistic elevation shadows?

Realistic shadows have three characteristics: positive Y offset (shadow below the element, simulating top-down light), moderate blur (10-20px for soft edges), and semi-transparent black (rgba(0,0,0,0.1-0.2)). Higher elevation elements use larger Y offset (20-40px) and higher opacity. For Material Design style, layer multiple shadows with different blur and opacity values.

Can I use multiple box shadows on one element?

Yes, CSS supports multiple box shadows separated by commas. This creates layered effects like combining a subtle spread shadow with a stronger directional shadow, or adding both inner and outer shadows. Design systems like Material Design use multi-layer shadows to create realistic depth with ambient and directional light simulation.

Is the box shadow generator free?

Yes, Fixie's CSS Box Shadow Generator is completely free with no signup requirements, no limits, and no ads. Create complex multi-layer shadows with instant code generation and live preview.

What's the difference between blur and spread?

Blur radius controls how soft and diffused the shadow edges appear. Higher blur creates softer, more gradual fading. Spread radius expands (positive) or contracts (negative) the shadow's size before blur is applied. Think of spread as making the shadow larger or smaller, and blur as making it softer or sharper. Most shadows use blur; spread is less common.

Related Tools

CSS Gradient Generator

Create CSS gradients visually

CSS Animation Generator

Generate CSS keyframe animations

Flexbox Layout Generator

Build CSS flexbox layouts visually