Developer Tools

Box Shadow Generator

Design CSS box-shadow values with live preview and copyable CSS.

X offset0Y offset16Blur32Spread-8Opacity0.24ColorInset

CSS declaration

box-shadow: 0px 16px 32px -8px rgba(17, 24, 39, 0.24);

How to use the Box Shadow Generator

Adjust the sliders

Set horizontal offset, vertical offset, blur, spread, opacity, and color.

Preview the shadow

Watch the sample card update as you tune the values.

Copy the CSS

Paste the generated box-shadow declaration into your stylesheet.

Generate CSS Box Shadows Visually

This box shadow generator helps front-end developers and designers create subtle or dramatic shadows without trial-and-error in DevTools. Tune the controls, preview the result, then copy a clean CSS declaration.

Live preview for every shadow setting
Supports inset shadows
RGBA color output with opacity control
Copy full CSS or the raw box-shadow value

Frequently Asked Questions

What does box-shadow do in CSS?

The box-shadow property adds one or more shadows around an element using offset, blur, spread, color, and optional inset values.

Can I use the generated CSS in Tailwind projects?

Yes. Copy the CSS value into a custom class, component stylesheet, or Tailwind arbitrary value where appropriate.

What is spread radius?

Spread expands or shrinks the size of the shadow before blur is applied. Positive values make it larger, negative values tighten it.

Related Tools

Cubic Bezier Generator

Build CSS cubic-bezier easing curves with presets and a live transition preview.

Hash Generator

Generate SHA-1, SHA-256, and SHA-512 hashes from any text input.

MD5 Hash Generator

Generate MD5 hash from any text string for checksums and verification.

UUID Generator

Generate random UUIDs (v4) in bulk with one click.

Password Generator

Generate strong, secure random passwords with customizable options.

Random Color Gradient Generator

Generate random color gradients with CSS code.

Loading pageLoading content.