CSS Shadow Generator

Create beautiful CSS box shadows and text shadows with multiple layers. Adjust blur, spread, color, and opacity with live preview.

Shadow Type

Shadow Presets

Soft Drop

2 shadows

Medium Drop

2 shadows

Large Drop

1 shadow

Inner Shadow

1 shadow

Pressed Button

1 shadow

Floating Card

2 shadows

Neon Glow

3 shadows

Neumorphism

2 shadows

Shadow States

Configure shadows for each interaction state. The preview shows transitions between states.

Preview

Background

Element

Text

Element

Hover and click the element to see state transitions

Generated CSS

.element {
  transition: box-shadow 0.3s ease;
}

.element {
  box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.element:hover {
  box-shadow: 0px 8px 12px -2px rgba(0, 0, 0, 0.15);
}

.element:active {
  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
}

Normal Shadows (1)

Drag to reorder

0px 4px 6px -1px

10%

Shadow Settings

X Offset

Y Offset

Blur Radius

Spread Radius

Shadow Color

Opacity

Inset Shadow

Create an inner shadow effect