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.

All tools

🟦

CSS Box Shadow Generator

Build beautiful multi-layer box shadows for any shape — cards, buttons, circles, pills, inputs, images, and FABs. 12 presets, live preview, syntax-highlighted CSS output. 100% in-browser.

100% in-browser10 shapes12 presetsMulti-layerNo signup

Presets

Preview Shape

Dashboard card / panel

Canvas

Shape bg

styles.css

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

Shadow Layers 1

0px 8px 24px -4px

#000000 · 14% opacity

Layer Controls

X Offset0px

Y Offset8px

Blur24px

Spread-4px

Opacity14%

Color

#000000

Inset

This layer

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

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

1What is CSS box-shadow?

The CSS box-shadow property adds shadow effects around an element. Each shadow has X offset, Y offset, blur radius, spread radius, color, and an optional inset keyword. Multiple shadows are comma-separated.

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.

Learn more

Developer Guides

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

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