▣

CSS Box Shadow Generator

Design CSS box shadows visually and copy the code. Free, private and instant.

More developer toolsJSON Formatter & Validator JSON Minifier JSON to CSV Converter CSV to JSON Converter Base64 Encode & Decode URL Encoder & Decoder HTML Entity Encoder & Decoder Regex Tester UUID Generator Hash Generator JWT Decoder Unix Timestamp Converter

X offset 0px

Y offset 12px

Blur 30px

Spread -6px

Colour

Opacity 25%

CSS

How to use the CSS Box Shadow Generator

Open the tool above and adjust the settings.
Check the live preview or result.
Copy or download the output.

About this tool

Adjust offset, blur, spread and colour with live preview and copy the box-shadow declaration.

CSS Box Shadow Generator is part of ToolStack Hub's Developer Tools. It runs entirely in your browser, which keeps your data private and makes results instant. There is nothing to install, no account to create and no usage limit.

Frequently asked questions

Is the CSS Box Shadow Generator free?

Yes. CSS Box Shadow Generator is completely free with no sign-up, limits or watermarks.

Is my data private when I use the CSS Box Shadow Generator?

Yes. It runs in your browser, so your input is not uploaded to our servers.

Does it work on mobile?

Yes. ToolStack Hub tools work on phones, tablets and desktop browsers.

Keep going

All developer tools

{}

JSON Formatter & Validator

Format, beautify, validate and minify JSON with clear error messages.

{ }

JSON Minifier

Compress JSON by removing whitespace and line breaks.

Word Counter

Count words, characters, sentences, paragraphs and reading time as you type.

Need this automated for your business?

Vantalume builds custom AI and web automation workflows so your team can stop doing repetitive work.

Talk to Vantalume