Box-shadow generator
Build a CSS box-shadow with sliders for offset, blur, spread, and color. The preview updates live and the CSS is one click away.
Pick a color or paste any HEX value.
box-shadow: 0px 8px 24px -4px rgba(15, 23, 42, 0.15);
Drop into any element’s style.
How to use this tool
- 1Adjust the x and y offsets to position the shadow.
- 2Tune blur radius and spread to control softness and reach.
- 3Pick a shadow color and toggle inset for inner shadows. Copy the CSS when ready.
About this tool
A well-tuned box-shadow gives elements depth without the heaviness of a real drop shadow. Subtle defaults (small offset, medium blur, low opacity) read as "elevation" in modern UI. Inset shadows are great for indicating pressed states or recessed surfaces.
Related tools
px to rem converter
Convert px to rem with a custom base font size. Instant, accurate, no signup.
rem to px converter
Convert rem to px with a custom base font size. Instant, accurate, no signup.
px to em converter
Convert px to em with a custom base font size. Instant, accurate, no signup.
em to px converter
Convert em to px with a custom base font size. Instant, accurate, no signup.
CSS gradient generator
Build a linear CSS gradient with two color stops and any angle. Live preview and copy-to-clipboard CSS.
Frequently asked questions
How do I use the output CSS?
Paste it as a `box-shadow` declaration on any element. The generated rule includes the full value string including offset, blur, spread, and color.
What does “spread” do?
Spread expands or contracts the shadow before the blur is applied. A positive spread makes the shadow larger than the element; a negative spread shrinks it inward.
When should I use inset?
Inset places the shadow inside the element, useful for pressed buttons, recessed inputs, or simulating depth on a surface that should look carved.
Can I stack multiple shadows?
Yes. CSS allows comma-separated shadows in a single `box-shadow` value. Generate each one here, then combine them: `box-shadow: shadow1, shadow2, shadow3;`.
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.