Brand PeelBrand Peel (Alpha)

CSS Box-Shadow Generator

Layer shadows, tweak offsets and blur, and preview the result on cards and buttons before copying the CSS.
Gradient Generator
Free Tool Design System
Tools Overview

CSS Box-Shadow Generator

Design layered CSS box shadows with live preview on cards and buttons, then copy the CSS declaration.

Catalog Context Part of Design System

See how this tool connects to category hubs, workflow paths, starter kits, and adjacent next steps.

Category HubBuild Stack

Starter Kits Including This Tool

Depth & elevation

Design System

Adjacent Brand Foundations Brand Governance Developer Marketing
PreviousNext
Next Move - Strong resultDesign System

Recommended: Easing Curve & Motion Studio

Shadows are ready. Pair them with branded easing for a complete feel.

Design motion

Shadow Layers

Add, remove, and configure each layer. Layers stack from top to bottom.

Layer 1

Preview & Export

See the shadow on a card and button.

Card Preview

CSS 

box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1);