Box Shadow Generator

Generate CSS box shadows with visual controls for multiple layers. Adjust position, blur, spread, color, and opacity with live preview and preset options.

Features

Multiple shadow layersVisual live previewPreset shadow stylesInset shadow supportColor and opacity controlCSS/Tailwind export

Box Shadow Generator

Shadow Controls

Preview Background:

Presets

Preview

Preview Element

Shadow 1

Inset

X Offset: 0px

Y Offset: 4px

Blur: 12px

Spread: 0px

Color

Opacity: 25%

CSS Output

.element {

box-shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

}

Tailwind CSS

shadow-[0px 4px 12px 0px rgba(0, 0, 0, 0.25)]

CSS Variable

--shadow: 0px 4px 12px 0px rgba(0, 0, 0, 0.25);

Box Shadow Guide

Shadow Types

Subtle: Light shadows for cards and buttons

Medium: Standard depth for modals and dropdowns

Large: High elevation for overlays

Inset: Pressed or recessed appearance

Parameters

X/Y Offset: Shadow direction and distance

Blur: How soft/sharp the shadow appears

Spread: Expands/contracts shadow size

Opacity: Shadow transparency level