What does the "inset" keyword do?

The inset keyword changes the shadow from an outer shadow (drawn outside the element) to an inner shadow (drawn inside the element's border). Inset shadows are useful for pressed button states, input focus styles, and glass-morphism effects.

How do I create a glow effect with box-shadow?

Set X and Y offset to 0, use a moderate blur radius (20-60px), set spread to 2-8px, and use a colored semi-transparent RGBA value. Layer two shadows — one with higher opacity for tight glow and one with lower opacity for the wider ambient glow.

How do I make a CSS box shadow for dark mode?

On dark backgrounds, traditional dark shadows become invisible because they blend with the dark surface. Use a lighter, colored shadow or a colored glow instead. Set the shadow color to a semi-transparent version of your brand color (e.g., rgba(139, 92, 246, 0.4)) with zero offset and a large blur radius for a subtle neon glow effect that works on dark backgrounds.

How do I create a pressed or active button shadow in CSS?

Use the inset keyword to create an inner shadow on the :active state. A typical pressed button uses: box-shadow: inset 0 2px 6px rgba(0,0,0,0.3). This creates the illusion of the button being pushed into the page. Combine with a transform: translateY(2px) for extra realism.

How do I create a material design elevation shadow in CSS?

Material Design elevation is created with two layered shadows: a key shadow (smaller, more opaque, sharper) and an ambient shadow (larger, less opaque, softer). For elevation 4dp: box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 3px 10px rgba(0,0,0,0.15). Higher elevation values increase offset and blur for both shadows.

How do I make a card with a soft shadow in CSS?

For a natural card shadow, use a low-opacity dark color with small offset and moderate blur: box-shadow: 0 4px 24px rgba(0,0,0,0.08). Layer a second tight shadow for depth: 0 1px 4px rgba(0,0,0,0.06). This two-layer approach mimics how real physical shadows look — a sharp contact shadow plus a wide diffuse shadow.

How do I add a box-shadow in Tailwind CSS?

Tailwind provides built-in shadow utilities: shadow-sm, shadow, shadow-md, shadow-lg, shadow-xl, shadow-2xl, shadow-inner, and shadow-none. For custom shadows, use arbitrary values: shadow-[0_4px_24px_rgba(0,0,0,0.08)]. You can also extend the theme in tailwind.config.js under theme.extend.boxShadow to define named custom shadows.

All tools CSS Gradient HTML Formatter HTML Viewer

🟦

CSS Box Shadow Generator

Advanced multi-layer shadow builder for any shape. 2D light pad, angle/distance mode, neumorphism generator, hover states, CSS/Tailwind/styled-components export, and CSS import. 100% in-browser.

100% in-browser12 shapes12 presetsNeumorphismHover stateNo signup

Presets

Preview Shape

Canvas

Shape bg

Hover shadow

.element {
  box-shadow: 0px 8px 24px -4px rgba(0, 0, 0, 0.14);
}

Input mode

Light source

☀️

x:0 y:8

Neumorphism Generator

Base color

#E0E5EC

Distance12px

Blur24px

Intensity20%

Base Layers1

0px 8px 24px -4px

#000000 · 14%

Layer Controls

X Offset0px

Y Offset8px

Blur24px

Spread-4px

Opacity14%

Color

#000000

Inset

This layer only

0px 8px 24px -4px rgba(0, 0, 0, 0.14)

You might also need

Browse all tools

CSS GradientBuild CSS gradients visually HTML FormatterBeautify HTML code HTML ViewerPreview HTML in browser Color PickerPick & convert colors UUID GeneratorGenerate v4 UUIDs All tools

Design Better Shadows — Stop Guessing Values

Writing CSS box-shadow by hand is a guessing game. You set box-shadow: 0 4px 16px rgba(0,0,0,0.1), reload the page, it is too light, you try 0.15, still not right, now try adding a second layer, adjust the spread, realize the blur is too aggressive… and twenty minutes later you have a shadow that is fine but not great.

This tool gives you visual sliders for every property — X offset, Y offset, blur, spread, color, and opacity — with a live preview that updates as you drag. Stack multiple shadow layers for depth. Preview on white, grey, dark, or navy backgrounds. Start from one of 8 presets (soft card, float, glow, brutal offset, pressed inset, layered) and customize from there. Copy the ready-to-paste CSS in one click.

How it works

Build the Perfect Shadow in Under 2 Minutes

Pick a preset

Start from Soft card, Float, Glow, Brutal, Pressed, or Layered — each is a production-ready shadow pattern used by real design systems.

Adjust with sliders

Drag X offset, Y offset, Blur, Spread, and Opacity sliders. The preview card updates in real time on your chosen background.

Layer shadows

Click "Add layer" to stack multiple shadows. Toggle visibility or delete any layer independently. Multi-layer shadows create more realistic depth.

Copy the CSS

The CSS output panel shows the complete box-shadow property with correct rgba values. Click "Copy CSS" and paste into your stylesheet.

Use cases

When to Reach for a CSS Shadow Generator

🃏

Card Components

Create the perfect card elevation shadow that looks natural on both white and near-white backgrounds without a harsh outline.

🔘

Buttons & CTAs

Add a subtle lift shadow to primary buttons that deepens on hover, and an inset pressed shadow for the active/click state.

✨

Glow Effects

Design colored glow effects for brand elements, neon UI, or highlight states using layered zero-offset colored shadows.

🪟

Modal & Drawer

Build the deep, wide shadow that makes modals and side drawers feel elevated above the rest of the page content.

🗿

Brutalist UI

Generate the sharp, hard-offset box shadows used in neo-brutalist and retro UI design styles (no blur, full opacity).

💎

Glassmorphism

Combine inset top-highlight shadows with outer glow shadows to achieve the glass-like frosted depth effect.

FAQ

Frequently Asked Questions

1How do I make my CSS box-shadow look more realistic and less flat?

Use two layered shadows: a tight sharp shadow (small blur, higher opacity) and a wide diffuse shadow (large blur, lower opacity). For example: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06). This two-layer approach mimics physical shadow behavior with a contact shadow plus an ambient shadow.

2Can I layer multiple box shadows?

Yes. CSS allows multiple comma-separated shadows on one element. Layering a tight sharp shadow with a wide diffuse shadow creates more realistic and visually rich depth than a single shadow.

3What does "inset" do?

Inset changes the shadow from outside the element to inside. It is used for pressed button states, input focus rings, and inner-light glass effects.

4How do I create a glow effect?

Set X and Y to 0, use a moderate blur (20-60px), spread of 2-8px, and a colored semi-transparent color. Layer two shadows: one tight with higher opacity, one wider with lower opacity for an ambient glow.

5What is the difference between box-shadow and filter: drop-shadow()?

CSS box-shadow applies to the element's rectangular box. filter: drop-shadow() follows the actual rendered shape including transparent areas — ideal for PNG images and SVGs. Only box-shadow supports inset shadows and multiple layers.

6How do I make a CSS box-shadow work on dark backgrounds?

On dark backgrounds, dark shadows are invisible. Use a colored glow instead: set shadow color to a semi-transparent brand color (e.g., rgba(139,92,246,0.4)) with zero offset and large blur. This creates a neon glow effect visible on dark surfaces.

7How do I create a pressed button shadow in CSS?

Use inset on the :active state: box-shadow: inset 0 2px 6px rgba(0,0,0,0.3). Combine with transform: translateY(2px) for a realistic pressed effect.

8How do I create a material design elevation shadow?

Material elevation uses two layered shadows: a key shadow (smaller, more opaque) and an ambient shadow (larger, less opaque). For 4dp elevation: box-shadow: 0 2px 4px rgba(0,0,0,0.3), 0 3px 10px rgba(0,0,0,0.15).

9Can I use box-shadow to create a border effect?

Yes. Set X, Y, and blur to 0 and use only spread: box-shadow: 0 0 0 2px #3B82F6. This creates a solid border that does not affect the element's layout — ideal for focus rings.

10How do I make a soft card shadow in CSS?

For a natural card shadow: box-shadow: 0 4px 24px rgba(0,0,0,0.08), 0 1px 4px rgba(0,0,0,0.06). Two layers — a wide diffuse shadow plus a tight contact shadow — mimic real physical shadow behavior.

11How do I add a custom box-shadow in Tailwind CSS?

Use built-in utilities (shadow-sm to shadow-2xl) or arbitrary values: shadow-[0_4px_24px_rgba(0,0,0,0.08)]. Extend named shadows in tailwind.config.js under theme.extend.boxShadow.

12Can I layer multiple box-shadows on a single element?

Yes — CSS supports comma-separated shadow layers, drawn front to back. Combine a tight contact shadow with a wide diffuse one: box-shadow: 0 1px 3px rgba(0,0,0,0.12), 0 8px 24px rgba(0,0,0,0.06). This generator's "Add layer" button lets you build and preview multi-layer shadows visually.

Learn more

Developer Guides

📖CSS Shadow Design Patterns 📖Tailwind CSS Shadow Guide 📖Glassmorphism UI Design 📖CSS Performance Best Practices

Last updated: May 2026

Feedback for css_box_shadow

Tell us what's working, what's broken, or what you wish we built next — it directly shapes our roadmap.

You make the difference

Good feedback is gold — a rough edge you hit today could be smoother for everyone tomorrow.

Feature ideas often jump the queue when lots of you ask.
Bug reports with steps get fixed faster — paste URLs or examples if you can.
Name and email are optional; we won't use them for anything except replying if needed.

Stay Updated

Get the latest tool updates, new features, and developer tips delivered to your inbox.

What you'll get

Product updates & new tools
JSON, API & developer tips
Unsubscribe anytime — no hassle

Get in touch

Feature ideas, bugs, or a quick thanks — we read every message.

support@unblockdevs.com