🔲

CSS Box Shadow Generator

CSS Tools

Create CSS box shadows with a visual editor. Free, private — all processing in your browser.

Shadow 1

Inset

X: 4px

Y: 4px

Blur: 15px

Spread: 0px

Color

box-shadow: 4px 4px 15px 0px #6366f140;

How to use

1. Enter or paste your data in the input area above
2. Adjust settings or options as needed
3. Click the action button or see real-time results
4. Copy the result with the copy button

All processing happens in your browser. Nothing is sent to any server.

About this tool

Create CSS box shadows with a visual editor supporting multiple shadow layers. Each layer has independent controls for horizontal offset, vertical offset, blur radius, spread radius, color, and inset mode. Stack multiple layers to create realistic, depth-rich shadows that mimic Material Design elevation levels. The tool generates clean CSS code with proper formatting for single or multi-layer shadows. Includes a live preview showing the shadow on a customizable element. Use it for card elevation effects, button hover states, neumorphic designs, colored glow effects, and inner shadows for pressed/recessed UI elements. Animate shadows with CSS transitions for interactive hover effects.