ToolKraken

← All tools

CSS Box Shadow Generator

Drag the sliders to shape a box-shadow, watch the live preview, and copy the CSS. Supports inset shadows too.

How to use the CSS Box Shadow Generator

  1. Adjust the sliders and color.
  2. Watch the live preview.
  3. Copy the CSS.

100% free, no sign-up, and it all runs in your browser — your data never leaves your device.

FAQ

What does inset do?

An inset shadow appears inside the element instead of outside, making it look pressed in or recessed.

Add this tool to your website — free

Paste this where you want the tool to appear. It links back to ToolKraken.

Related tools

UUID Generator Generate random UUID (v4) identifiers. JSON Formatter Format, beautify & validate JSON. Base64 Encode / Decode Encode or decode Base64 text. Color Converter Pick a color, get HEX, RGB & HSL.