CSS Box Shadow Examples — Ready-to-Use Shadow Styles

Finding the right CSS box shadow can make or break a design. Below are 10 practical box-shadow examples you can copy and paste directly into your stylesheets. Each example includes a live preview, the exact CSS code, and guidance on when to use it. If you want to customize any of these shadows further, open them in freeboxshadow.app to adjust values visually and export production-ready code in seconds.

The box-shadow property accepts horizontal offset, vertical offset, blur radius, spread radius, and color. Combining multiple shadow layers produces richer, more realistic depth. These examples progress from subtle elevation to bold, expressive styles so you can find the right fit for any project.

1. Subtle Elevation

box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);

Best for cards, list items, and containers where you need a slight lift without drawing attention to the shadow itself. Works universally on light and dark backgrounds.

2. Medium Shadow

box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);

A versatile mid-range shadow ideal for hover states, dropdowns, and popovers. Provides clear depth without looking heavy. Use this as your default interactive elevation.

3. Large Shadow

box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);

A prominent shadow for modals, dialogs, and floating panels. The large blur radius creates a soft, diffused effect that lifts the element well above the page.

4. Sharp / Hard Shadow

box-shadow: 4px 4px 0 rgba(0, 0, 0, 0.15);

A zero-blur shadow creates a flat, graphic effect popular in brutalist and retro designs. Adjust the offset to control directionality. Works well with bold color schemes.

5. Soft Glow

box-shadow: 0 0 20px rgba(196, 154, 42, 0.3);

A colored glow with zero offset radiates evenly around the element. Perfect for highlighted cards, active states, or call-to-action buttons. Replace the color to match your brand.

6. Layered (Multi-Shadow)

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.07), 0 4px 8px rgba(0, 0, 0, 0.05), 0 12px 32px rgba(0, 0, 0, 0.05);

Stacking multiple shadows at different sizes mimics real-world light behavior. This produces the most natural-looking elevation. Material Design and modern UI frameworks rely on this approach.

7. Border Shadow (Spread Only)

box-shadow: 0 0 0 2px rgba(196, 154, 42, 0.4);

Using only spread with no blur creates an outline-like border that does not affect layout. Useful for focus rings, selection indicators, and hover highlights without changing element dimensions.

8. Neumorphic (Soft UI)

box-shadow: 8px 8px 16px rgba(0, 0, 0, 0.1), -8px -8px 16px rgba(255, 255, 255, 0.7);

Neumorphism uses opposing light and dark shadows to make elements appear extruded from the surface. Works best on light, muted backgrounds where both shadow layers are visible. Use sparingly for buttons and toggles.

9. Inset Shadow

box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);

The inset keyword places the shadow inside the element. Ideal for text inputs, wells, and pressed-button states where you want a recessed, sunken look.

10. Floating Card

box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12), 0 8px 20px rgba(0, 0, 0, 0.08);

A dramatic two-layer shadow that makes the element appear to hover high above the page. Great for hero cards, featured content, and landing page sections that need to command attention.

How to Choose the Right Box Shadow

The right shadow depends on your element's role in the visual hierarchy. Use subtle shadows (examples 1-2) for default states and larger shadows (examples 3, 10) for elements that need prominence like modals and hero sections. Layered shadows (example 6) produce the most realistic depth and are the gold standard in modern UI design. For interactive states, transition between shadow levels on hover or focus to communicate responsiveness.

How to Customize These Shadows with freeboxshadow.app

Every example above can be loaded into freeboxshadow.app for visual editing. Adjust the offset, blur, spread, and color with sliders and see the result in real time. Add or remove shadow layers, toggle the inset keyword, and copy the final CSS with one click. No account required, no data sent to any server.

Can You Animate CSS Box Shadows?

Yes, box-shadow is animatable with CSS transitions and keyframes. However, animating large or complex shadows can impact rendering performance because each frame triggers a repaint. A common optimization is to animate opacity on a pseudo-element that contains the shadow instead, avoiding per-frame shadow recalculation. Use freeboxshadow.app to design both the starting and ending shadow states, then transition between them.

Build Your Own Shadow — Free, No Sign-Up

All processing happens in your browser. Your data never leaves your device.

Open Box Shadow Generator →

Frequently Asked Questions

What is the CSS box-shadow property?

The CSS box-shadow property adds shadow effects around an element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. You can apply multiple shadows to one element by separating them with commas.

How do I create a subtle shadow in CSS?

A subtle shadow uses a small blur radius and low opacity. For example: box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08). This creates a barely visible lift that works well for cards and containers without overwhelming the design.

What is the difference between box-shadow and drop-shadow?

box-shadow applies a rectangular shadow to the element's box model, including padding and border. drop-shadow is a CSS filter that follows the actual shape of the element, including transparent areas in images. Use box-shadow for cards and containers, and drop-shadow for irregular shapes like icons or PNG images.

Can I use multiple box shadows on one element?

Yes. Separate multiple shadow values with commas. Layered shadows create more realistic depth. For example: box-shadow: 0 1px 2px rgba(0,0,0,0.07), 0 4px 16px rgba(0,0,0,0.05). The first shadow listed renders on top.

What is a neumorphic shadow?

Neumorphism (or soft UI) uses two shadows — one light and one dark — to make elements appear extruded from or pressed into the background. A typical neumorphic shadow looks like: box-shadow: 8px 8px 16px rgba(0,0,0,0.1), -8px -8px 16px rgba(255,255,255,0.7). The effect works best on light, muted backgrounds.

How do I make an inset shadow in CSS?

Add the inset keyword before the shadow values: box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.1). Inset shadows appear inside the element, creating a recessed or pressed-in appearance. They are commonly used for input fields, wells, and toggle buttons.