CSS Box Shadow Examples: 20+ Shadows You Can Copy and Paste

The CSS box-shadow property is one of the most versatile tools for adding depth, realism, and visual hierarchy to your web designs. A well-chosen shadow can make the difference between a flat, lifeless interface and one that feels polished and professional. Yet many developers either stick with the same generic shadow everywhere or avoid shadows entirely because they are unsure how to create good ones.

This guide provides 20+ production-ready box shadow examples across multiple categories: subtle elevations, dramatic depth effects, neumorphism, glassmorphism, inset shadows, colored glows, and layered techniques. Every example includes the CSS code you can copy directly, a live preview, and an explanation of when and why to use that particular shadow.

1. Box Shadow Syntax Explained

Before diving into examples, let us understand the box-shadow syntax. The property accepts one or more shadow values, separated by commas. Each shadow value follows this structure:

box-shadow: [inset] offset-x offset-y [blur-radius] [spread-radius] color;

/* Breakdown of each value: */
/* inset        - Optional. Makes the shadow appear inside the element */
/* offset-x     - Horizontal offset. Positive = right, Negative = left */
/* offset-y     - Vertical offset. Positive = down, Negative = up */
/* blur-radius  - Optional. How blurry the shadow is (0 = sharp edge) */
/* spread-radius - Optional. Expands (+) or shrinks (-) the shadow */
/* color        - Shadow color, usually with transparency (rgba/hsla) */

The key insight most developers miss is that blur radius and spread radius are different things. Blur makes the shadow fade out gradually, while spread changes the physical size of the shadow before blurring. Combining them correctly is the secret to realistic shadows.

Another often-overlooked feature is that you can stack multiple shadows using commas. This is the technique behind the most realistic shadow effects, as real-world objects cast multiple layers of shadow at different distances and intensities.

/* Multiple shadows on one element */
box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.07),    /* tight, subtle shadow */
    0 4px 8px rgba(0, 0, 0, 0.05),    /* medium ambient shadow */
    0 12px 24px rgba(0, 0, 0, 0.03);  /* wide, diffuse shadow */

2. Subtle Elevation Shadows

Subtle shadows are the workhorses of modern UI design. They create gentle lift and separation without drawing attention to themselves. Use these on cards, form inputs, buttons, and any element that needs to float slightly above the background.

Shadow 1: Whisper

The lightest possible shadow. Almost invisible, but gives just enough depth to separate an element from the background. Perfect for cards in content-heavy layouts where you want structure without distraction.

box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);

Shadow 2: Soft Lift

A step up from Whisper. This shadow is visible enough to clearly define boundaries while remaining understated. The go-to shadow for most card-based layouts.

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

Shadow 3: Gentle Float

Creates the illusion that the element is floating a few pixels above the surface. This is one of the most popular shadows in SaaS dashboards and modern web apps.

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

Shadow 4: Paper

Inspired by Material Design's elevation system. Simulates a piece of paper resting on a surface. The negative spread keeps the shadow tight against the element edges.

box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06),
            0 4px 6px rgba(0, 0, 0, 0.04);

3. Medium Depth Shadows

Medium shadows create a clear sense of elevation. They work well for hover states, modal dialogs, dropdown menus, and any element that should appear to float noticeably above its surroundings.

Shadow 5: Elevated

A balanced elevation shadow. Works well as a hover state for cards that use a subtle shadow as their resting state. The transition between Gentle Float (rest) and Elevated (hover) feels natural.

box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
            0 4px 6px -4px rgba(0, 0, 0, 0.05);

Shadow 6: Dropdown

Designed specifically for dropdown menus and popovers. The shadow falls primarily downward with tight horizontal containment, mimicking the way menus emerge from toolbars.

box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08),
            0 3px 6px rgba(0, 0, 0, 0.06);

Shadow 7: Tailwind-Inspired Medium

Based on the popular Tailwind CSS shadow-lg utility. Tried and tested across thousands of production websites. A safe choice for almost any use case.

/* Equivalent to Tailwind's shadow-lg */
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
            0 4px 6px -4px rgba(0, 0, 0, 0.1);

4. Dramatic & Bold Shadows

When you need to make a statement. These shadows are for hero cards, pricing tables, featured content, and call-to-action sections where the element must command attention.

Shadow 8: High Rise

A prominent shadow that makes elements appear to float well above the surface. Use sparingly, typically for a single featured element per page section.

box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
            0 8px 10px -6px rgba(0, 0, 0, 0.08);

Shadow 9: Tower

Maximum elevation. The element appears to float far above the page. Best for modal overlays, lightboxes, and full-screen dialogs.

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

Shadow 10: Cinematic

A deep, diffuse shadow that creates a cinematic depth of field effect. The wide blur and moderate opacity make it feel like the element is significantly elevated.

box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.18),
            0 12px 20px -8px rgba(0, 0, 0, 0.1);

5. Layered (Multi-Shadow) Techniques

Real-world objects do not cast a single, uniform shadow. They cast multiple layers: a tight, dark shadow near the object and a wider, lighter shadow further away. Layered shadows replicate this natural behavior and produce the most realistic results.

Shadow 11: Natural Triple Layer

Three shadow layers that mimic how light actually works. The first layer is a tight contact shadow, the second is the primary depth shadow, and the third is a wide ambient shadow. This is the gold standard for realistic card shadows.

box-shadow:
    0 1px 1px rgba(0, 0, 0, 0.06),   /* contact shadow */
    0 4px 8px rgba(0, 0, 0, 0.06),   /* depth shadow */
    0 16px 32px rgba(0, 0, 0, 0.04); /* ambient shadow */

Shadow 12: Smooth Quintet

Five layers for the smoothest, most natural shadow possible. Each layer doubles the offset and blur of the previous one, creating a perfectly graduated shadow. This technique was popularized by Tobias Ahlin and is considered one of the best shadow approaches in CSS.

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

Shadow 13: Sharp + Diffuse

Combines a sharp, defined shadow with a wide diffuse glow. This creates an interesting look where the element appears to cast a hard shadow but also illuminate the surface around it. Works well for images and hero cards.

box-shadow:
    0 2px 4px rgba(0, 0, 0, 0.12),   /* sharp, close shadow */
    0 24px 48px rgba(0, 0, 0, 0.06); /* wide, diffuse glow */

6. Neumorphism Shadows

Neumorphism (or "new skeuomorphism") creates the illusion that UI elements are extruded from or pressed into the background. It requires two shadows: a light one (simulating light hitting the raised edge) and a dark one (the actual shadow). The background color of the element must match its parent for the effect to work.

Important: Neumorphism can reduce accessibility if not implemented carefully, because the low contrast between elements and backgrounds can make interfaces hard to read. Always pair neumorphic shadows with sufficient text contrast and clear interactive states.

Shadow 14: Neumorphic Raised

The classic neumorphic "pushed out" button. The element appears to protrude from the surface. Note that the background color (#e0e5ec) must match the parent element.

/* Parent and element both need background: #e0e5ec */
box-shadow: 8px 8px 16px #b8bec7,
            -8px -8px 16px #ffffff;

Shadow 15: Neumorphic Pressed

The "pressed in" counterpart. Use this for active/pressed button states or to indicate a toggled-on state. The inset keyword flips the shadow direction.

/* Inset version for "pressed" state */
box-shadow: inset 6px 6px 12px #b8bec7,
            inset -6px -6px 12px #ffffff;

Shadow 16: Neumorphic Flat

A subtler variant that appears flat but has just enough shadow to define edges. Useful for text inputs and secondary containers in neumorphic designs.

box-shadow: 4px 4px 8px #b8bec7,
            -4px -4px 8px #ffffff,
            inset 1px 1px 2px rgba(255, 255, 255, 0.5);

7. Glassmorphism Shadows

Glassmorphism creates a frosted-glass effect using background blur and translucency. The shadow component is typically soft and subtle, because the translucent background already provides visual separation. The magic comes from combining backdrop-filter: blur() with a semi-transparent background and gentle shadows.

Shadow 17: Frosted Glass

The essential glassmorphism shadow. Pair this with backdrop-filter: blur(12px) and a translucent background for the full effect. The shadow is intentionally light to avoid competing with the blur effect.

/* Complete glassmorphism effect */
background: rgba(255, 255, 255, 0.6);
backdrop-filter: blur(12px);
-webkit-backdrop-filter: blur(12px);
border: 1px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.08);

Shadow 18: Glass Card

A more pronounced glass effect with a visible bottom border that acts as a light refraction line. This variation works especially well on dark or gradient backgrounds.

background: rgba(255, 255, 255, 0.15);
backdrop-filter: blur(16px);
border: 1px solid rgba(255, 255, 255, 0.2);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);

8. Inset Shadows

Inset shadows create the illusion of depth going into the element, like a carved recess or sunken panel. They are commonly used for text inputs, progress bars, toggle switches, and any element that should appear recessed into the surface.

Shadow 19: Subtle Inset

A minimal inset shadow for text inputs. Provides just enough visual cue that the element is an input field, without being distracting.

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

Shadow 20: Deep Well

A pronounced recess effect. Use this for containers that should appear carved into the surface, like a sunken sidebar or a recessed panel.

box-shadow: inset 0 4px 12px rgba(0, 0, 0, 0.1),
            inset 0 1px 2px rgba(0, 0, 0, 0.08);

9. Colored & Glow Shadows

Colored shadows add personality and can reinforce brand identity. They are particularly effective for buttons, accent cards, and call-to-action elements. Glow effects (shadows with zero offset and large blur) create a neon-like luminance around elements.

Shadow 21: Brand Glow (Indigo)

A colored glow that reinforces brand identity. Replace the color with your own brand color. The key is using a large blur radius with moderate opacity so the glow feels natural rather than harsh.

/* Use your brand color with 30-50% opacity */
box-shadow: 0 8px 24px rgba(99, 102, 241, 0.4);

Shadow 22: Neon Glow

A vibrant, neon-like glow. Excellent for dark themes, gaming sites, and creative portfolios. Combine with a matching border for extra punch.

box-shadow: 0 0 20px rgba(56, 189, 248, 0.5),
            0 0 40px rgba(56, 189, 248, 0.2),
            0 0 80px rgba(56, 189, 248, 0.1);
border: 1px solid rgba(56, 189, 248, 0.3);

Shadow 23: Sunset Glow

A warm, gradient-like glow using two different colored shadows. Creates a beautiful warm ambiance around the element, perfect for featured content or premium CTAs.

box-shadow: -8px 8px 24px rgba(251, 113, 133, 0.3),  /* pink */
             8px -8px 24px rgba(251, 191, 36, 0.3);   /* amber */

Shadow 24: Success/Error States

Colored shadows are excellent for communicating state. A green glow for success, red for error, and amber for warning. These shadows should only appear on state change, never as a resting state.

/* Success state */
box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.15),
            0 4px 12px rgba(34, 197, 94, 0.2);

/* Error state */
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.15),
            0 4px 12px rgba(239, 68, 68, 0.2);

/* Warning state */
box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.15),
            0 4px 12px rgba(245, 158, 11, 0.2);

10. Performance Considerations

Box shadows are rendered by the browser's compositor and can impact performance if used carelessly. Here are the key things to keep in mind:

• Animating box-shadow is expensive. When you transition box-shadow on hover, the browser must repaint the shadow on every frame. For smooth 60fps animations, use a pseudo-element trick: place the shadow on an ::after element and animate its opacity instead.
• Large blur radii are costly. A blur-radius of 100px requires the browser to sample and blend a much larger area than a blur of 10px. Keep blur values reasonable, especially on mobile devices.
• Multiple shadows multiply the cost. Each shadow layer in a comma-separated list is rendered separately. While 3-5 layers are fine, avoid using 10+ shadow layers on elements that animate frequently.
• Use will-change: transform sparingly. If you must animate shadows, adding will-change: transform to the element promotes it to its own GPU layer, which can improve performance. But overusing this property wastes memory.

Here is the pseudo-element technique for performant shadow animations:

.card {
    position: relative;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.07);
}

.card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transition: opacity 0.3s ease;
    z-index: -1;
    pointer-events: none;
}

.card:hover::after {
    opacity: 1; /* Only opacity changes = GPU-accelerated */
}

This technique is dramatically smoother than transitioning box-shadow directly, because opacity changes are handled entirely by the GPU compositor without triggering layout or paint operations.

11. Best Practices

After years of working with shadows across hundreds of designs, these are the principles that consistently produce the best results:

• Use rgba() or hsla() for shadow colors, never hex. You need transparency control. A solid black shadow looks artificial; a semi-transparent one blends naturally with any background.
• Match shadow direction to your light source. If your design has a top-left light source (the most common convention), all shadows should offset slightly to the bottom-right. Inconsistent shadow directions make interfaces feel disorienting.
• Create a shadow scale. Define 3-5 shadow levels in your CSS custom properties (like Tailwind does with shadow-sm, shadow-md, shadow-lg) and use them consistently throughout your project. This creates visual coherence.
• Increase shadow on hover, decrease on press. This follows real-world physics: lifting an object increases its shadow distance, pressing it reduces the gap.
• Use colored shadows on colored elements. A red button should cast a reddish shadow, not a gray one. This subtle detail makes interfaces feel more polished and realistic.
• Less is more on dark backgrounds. On dark themes, shadows are less visible. Consider using light borders or subtle gradient backgrounds instead of (or in addition to) shadows to create depth.

Here is a complete shadow scale you can drop into any project:

:root {
    --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08),
                 0 1px 2px rgba(0, 0, 0, 0.06);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07),
                 0 2px 4px -2px rgba(0, 0, 0, 0.05);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08),
                 0 4px 6px -4px rgba(0, 0, 0, 0.05);
    --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1),
                 0 8px 10px -6px rgba(0, 0, 0, 0.08);
    --shadow-2xl: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
}

/* Usage */
.card { box-shadow: var(--shadow-md); transition: box-shadow 0.2s; }
.card:hover { box-shadow: var(--shadow-xl); }

By defining shadows as CSS custom properties, you ensure consistency across your entire project and make it easy to adjust the shadow style globally. This approach scales from personal projects to large design systems.