Skip to content
FizzKit

Box Shadow Generator

Visually tune offset, blur, spread, and color for `box-shadow`, including multiple stacked shadows and inset effects. Copy the final CSS value with one click.

Runs locally in your browser
Preview
Layers (1)
Layer 1
0px 4px 12px -2px
0
4
12
-2
CSS
box-shadow: 0px 4px 12px -2px rgba(17,24,39,0.10);
Layers
1
Inset
0
Max blur
12px
Box color
#ffffff

Related tools

CSS Gradient Generator

Build CSS gradients visually and copy the code.

Color Converter

Convert between HEX, RGB, HSL, and CMYK.

Color Palette Generator

Build harmonious palettes from a seed color.

HEX to RGB

Convert HEX color codes to RGB values and back.

About Box Shadow Generator

Visually tune offset, blur, spread, and color for `box-shadow`, including multiple stacked shadows and inset effects. Copy the final CSS value with one click.

Box Shadow Generator is part of FizzKit — a collection of focused, browser-based tools. Because everything runs locally, it works offline once loaded and never exposes your data to a remote server.

Frequently asked questions

Yes. Add layers and the generator outputs a comma-separated `box-shadow` value.