CSS Box Shadow & Glassmorphism Generator

Visual CSS shadow and glassmorphism designer. Build multi-layer box shadows, backdrop blur effects, and copy ready-to-use CSS code instantly.

Preview BG:

Shadow Layers (2)

Layer 1

Layer 2

Horizontal Offset (X)0px

Vertical Offset (Y)10px

Blur Radius25px

Spread Radius-5px

Color

#000000

Opacity: 10%

Inset Shadow (Inner)

Corner Radius:

CSS Code

box-shadow:
  0px 10px 25px -5px rgba(0, 0, 0, 0.1),
  0px 8px 10px -6px rgba(0, 0, 0, 0.1);
border-radius: 20px;

Box Shadow PreviewLive Rendering

Overview

What this tool does

Visually design multi-layer CSS box shadows and glassmorphism backdrop blur cards with live CSS export.

100% private in-browser processing. Zero cloud uploads.

Tutorial

How to use it

1Adjust shadow offsets (X/Y), blur, spread, color, opacity, and inset toggles.
2Add multiple shadow layers or switch to the Glassmorphism tab.
3Copy the generated CSS snippet to use directly in your project.

What would you like to do next?

Explore other free local tools

JSON Formatter

Format, validate, and beautify your JSON data.

Compress PDF

Reduce PDF file size without losing quality.

Sign PDF

Draw, upload, or type your e-signature locally.

Did you know?

We process your documents privately in local sandbox storage. Your actual data remains in your browser tab. We never log, view, or store file contents.