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
Short answers to what people ask most.
How do I use the output CSS?
What does “spread” do?
When should I use inset?
Can I stack multiple shadows?
Reviewing work with your team?
Pin comments directly on a live website or design — no extension, no setup.