What does the "inset" option do?

It flips the shadow to render inside the element's border instead of outside it, creating a pressed-in or recessed look instead of a raised one.

Can I stack multiple shadows on one element?

Yes — CSS box-shadow supports comma-separated layers; combining a tight, dark shadow with a soft, lighter one is a common way to create more realistic depth.

webPopular Client-Side Only

CSS Box Shadow Generator

Design smooth CSS box shadows with live interactive preview and instant copyable CSS.

Preview Box

Offset X: 0px

Offset Y: 10px

Blur Radius: 25px

Spread Radius: -5px

Opacity: 15%

Inset Shadow

box-shadow: 0px 10px 25px -5px rgba(0, 0, 0, 0.15);

Quick Reference & Instructions

Simple steps, pro tips, and execution details

Paste or Enter Input

Paste your raw JSON, code snippet, tokens, or values into the input panel.

Select Options & Modes

Choose formatting options, indentation spaces, or target conversion standards.

Copy or Download Output

One-click copy to clipboard or download the formatted file ready for production.

How It Works

Adjusts X/Y offset, blur, spread, color, opacity, and inset rules with live component previews.

Frequently Asked Questions

Common questions about calculations, assumptions, and edge cases.

Blur softens the shadow's edges into a gradient; spread expands or contracts the shadow's size uniformly in every direction before blur is applied.

Related Tools

Explore all web tools →

CSS Border Radius Generator

Generate custom CSS border-radius rules with individual corner control and visual preview.

webOpen Tool

CSS Gradient Generator

Create linear and radial CSS gradients with customizable angle sliders and color stops.

webOpen Tool