CSS Box Shadow Generator
Build layered CSS box-shadow values visually with offset, blur, spread, colour, opacity and inset controls.
Runs in your browserSettings → CSS
Loading tool…
How to use the CSS Box Shadow Generator
- Paste or type your Settings into the input area, or open a file from your device.
- Adjust the options above the editor if the tool offers any.
- Review the CSS result, then copy it or download it as a file.
Privacy and limitations
- Your data is processed on your device and is not uploaded to any server.
Related converters
CSS Gradient GeneratorDesign linear, radial and conic CSS gradients with up to five colour stops, a live preview and copy-ready CSS.CSS Border Radius GeneratorSet each corner radius in px, % or rem with a live preview and get the shortest border-radius shorthand.CSS to JS Object ConverterConvert CSS declarations or rules into camelCase JavaScript style objects for React, CSS-in-JS or JSON.EM to PX ConverterConvert em values to pixels from a parent font size, as a list or inside pasted CSS rules.CSS Specificity CalculatorCalculate the specificity (A,B,C) of CSS selectors, including :is(), :not(), :has() and :where(), and see which wins.PX to EM ConverterConvert pixel values to em relative to a parent font size, for single values or every px in a stylesheet.SCSS to CSS CompilerCompile SCSS or indented Sass to plain CSS in your browser with the official Dart Sass compiler, expanded or minified.REM to PX ConverterConvert rem values to pixels for a given root font size, either as a list or inside pasted CSS.