What is CSS box-shadow and how does it work?

CSS box-shadow adds one or more shadow effects around an element's frame using the syntax: box-shadow: offset-x offset-y blur-radius spread-radius color. You can stack multiple shadows by separating them with commas. The inset keyword creates an inner shadow. Box shadows are widely used in web design for depth, elevation, and neumorphic UI effects.

How do I copy and paste a CSS box shadow?

On UIXplor, click the "View Code →" button on any shadow card. The code viewer displays the CSS box-shadow property and its corresponding HTML class. Click the copy button, then paste the CSS directly into your stylesheet. No installation or signup required.

What is a neumorphic box shadow?

Neumorphic (or neuomorphic) box shadows simulate a soft extruded plastic look by combining a dark shadow on one side and a light highlight on the opposite side. The typical CSS pattern is: box-shadow: 6px 6px 16px rgba(0,0,0,0.06), -6px -6px 16px rgba(255,255,255,0.8). The element appears to rise out of the background surface.

How do I add box shadow in Tailwind CSS?

Tailwind CSS provides built-in box shadow utilities: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl. Apply them as class names on any element, e.g., . For custom shadows, use shadow-[value] with arbitrary values or define them in tailwind.config.js under the theme.boxShadow key.

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

box-shadow applies to the element's rectangular bounding box, including its border-radius. The CSS filter drop-shadow() function, by contrast, follows the exact shape of the rendered content — making it ideal for transparent PNGs or irregular shapes like SVGs. box-shadow supports inset shadows and multiple layers; filter drop-shadow does not.

Box Shadow Copy & Paste – 100 CSS Examples

What Is a CSS Box Shadow?

The CSS box-shadow property adds one or more shadow effects around an element's frame. The full syntax is:

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

You can layer multiple shadows by separating them with commas — a powerful technique for creating realistic depth and multi-colored glow effects. Adding the inset keyword makes the shadow appear inside the element rather than outside, useful for pressed-button states and sunken inputs. Every shadow in UIXplor's library is a real, tested CSS box shadow example you can copy and paste directly into your project.

Types of CSS Box Shadows in This Collection

This free CSS shadow preset library is categorised by visual style so you can quickly find the right shadow for your design system.

🌫️ Soft Shadows

Barely-there shadows that add a whisper of depth without visual weight. Perfect for card UIs, minimalist dashboards, and product landing pages. These shadows use very low opacity values and wide blur radii to create the illusion of floating elements.

📦 Layered / Stacked Shadows

Multi-layer shadows that combine 3–4 separate shadow values at increasing distances. The result looks far more natural and realistic than a single box-shadow because it mimics how light scatters rather than casting a uniform shadow.

🪨 Deep Elevation Shadows

Bold, high-spread shadows that lift elements dramatically off the background — ideal for modals, floating action buttons, tooltips, and hero sections where you need a strong Material Design-style elevation.

🧱 Neumorphic Shadows

The viral Neumorphism design trend uses dual shadows — a dark shadow on one side and a bright highlight on the other — to simulate elements extruded from a surface. These neumorphic CSS box shadow presets are ready to drop into your soft-UI projects.

✨ Glow Shadows

Colorized, spread-heavy shadows that radiate light from behind an element. Widely used in dark-mode UIs, gaming dashboards, and cyberpunk-style designs. UIXplor includes both monochrome and tinted glow variants.

🔲 Inset Shadows

Inner shadows that make an element appear sunken into the page. Applications include pressed button states, text input fields, progress bars, and carved-out containers. Inset shadows are defined by prepending the inset keyword.

How to Use These Box Shadow Presets

01.Browse the shadow grid above and click View Code → on any card.
02.Copy the CSS tab — it contains the full box-shadow value inside a ready-to-use class.
03.Paste into your CSS file, Tailwind config, or CSS-in-JS theme object.
04.Adjust the color, blur, or spread to match your design tokens.

Tailwind CSS Box Shadow Utilities

If you use Tailwind CSS, the framework ships with built-in shadow utilities that map directly to CSS box shadows. The standard scale is shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, and shadow-2xl. For custom values, use arbitrary syntax:

<div class="shadow-[0_8px_30px_rgba(0,0,0,0.12)]">

To add the UIXplor presets to your Tailwind design system, extend the theme.boxShadow key in tailwind.config.js:

// tailwind.config.js
module.exports = {
  theme: {
    extend: {
      boxShadow: {
        'cloud': '0 1px 4px rgba(0,0,0,0.02), 0 4px 16px rgba(0,0,0,0.04)',
        'abyss': '0 10px 24px rgba(0,0,0,0.06), 0 32px 80px rgba(0,0,0,0.10)',
        'glow':  '0 0 16px rgba(100,120,200,0.15), 0 0 48px rgba(100,120,200,0.08)',
      },
    },
  },
};

Box Shadow vs. CSS Filter Drop-Shadow

A common source of confusion: when should you use CSS box-shadow vs. filter: drop-shadow()?

Feature	box-shadow	filter: drop-shadow()
Follows element shape	Rectangular / border-radius	Exact rendered shape
Works on transparent PNGs / SVGs	No	Yes ✓
Multiple layers	Yes ✓	One at a time
Inset / inner shadow	Yes ✓	No
Spread radius	Yes ✓	No

Use box-shadow for standard rectangular HTML elements. Use filter: drop-shadow() when you need a shadow that hugs the silhouette of an icon, illustration, or cutout image.

Frequently Asked Questions

How many box shadow examples are in this collection?: UIXplor currently includes 100 CSS box shadow presets spanning 7 categories: design tokens, soft, layered, deep, neumorphic, glow, and inset. New shadows are added regularly.
Are these CSS box shadows free to use in commercial projects?: Yes. All shadow presets on UIXplor are free to copy, paste, and use in personal or commercial projects without attribution.
What is a neumorphic box shadow?: Neumorphic shadows simulate soft extruded plastic by combining a dark shadow on one side with a bright highlight on the opposite side. The element appears to rise out of the background.
How do I add a box shadow in Tailwind CSS?: Use Tailwind's built-in utilities like shadow-sm, shadow-md, shadow-lg, or shadow-2xl. For custom values, use arbitrary syntax: shadow-[0_8px_30px_rgba(0,0,0,0.12)].
Can I combine multiple CSS box shadows?: Yes. Separate each shadow with a comma: box-shadow: 0 2px 4px rgba(0,0,0,0.05), 0 8px 24px rgba(0,0,0,0.08). Layered shadows look far more natural than single shadows.

Explore More CSS Tools

Looking for more free CSS resources? UIXplor's collection library has you covered.

🎨Gradient GeneratorCSS gradient presets — copy & paste 🪟Glass Effect GeneratorGlassmorphism CSS snippets 🛠️CSS Tools LibraryAll free CSS generators & snippets