Toolorio

CSS Box-Shadow Generator

Adjust the sliders to design a box-shadow visually, then copy the generated CSS straight into your stylesheet.

CSS
box-shadow: 0px 10px 20px 0px rgba(0, 0, 0, 0.25);

Your files are processed locally in your browser. They are not uploaded to our servers.

How to use

  1. Drag the offset, blur and spread sliders to shape the shadow.
  2. Pick a shadow color and adjust its opacity, and toggle inset if needed.
  3. Copy the generated box-shadow CSS shown below the preview.

What is this tool?

CSS Box-Shadow Generator lets you visually design a CSS box-shadow using sliders for offset, blur, spread and opacity, plus a color picker and inset toggle. A live preview box shows the shadow as you adjust it, and the exact CSS is generated automatically.

Common uses

  • Designing a card or button shadow without guessing pixel values
  • Prototyping elevation and depth effects for a UI
  • Learning how each box-shadow parameter affects the result
  • Quickly generating shadow CSS for a component library

Related tools

PWPassword GeneratorDeveloper Tools{}JSON FormatterDeveloper Tools64Base64 Encoder/DecoderDeveloper ToolsURLURL Encoder/DecoderDeveloper ToolsUIDUUID GeneratorDeveloper ToolsSHAHash GeneratorDeveloper ToolsHEXColor ConverterDeveloper ToolsTSTimestamp ConverterDeveloper ToolsC2JCSV to JSON ConverterDeveloper ToolsJ2CJSON to CSV ConverterDeveloper ToolsJ2TJSON to TypeScript ConverterDeveloper Tools0x1Number Base ConverterDeveloper ToolsIVRoman Numeral ConverterDeveloper ToolsUTMTracking URL CleanerDeveloper ToolsX2JXML to JSONDeveloper ToolsGFCSS Grid & Flexbox GeneratorDeveloper ToolsCJCronjob GeneratorDeveloper ToolsRXRegEx TesterDeveloper ToolsHEHTML Entities ConverterDeveloper ToolsTGFrequency & Tone GeneratorDeveloper ToolsSTAudio Stereo TesterDeveloper ToolsGCGPS Coordinate ConverterDeveloper Tools

FAQ

What does the spread value do?

Spread expands or contracts the shadow's size in all directions before the blur is applied — positive values make the shadow larger than the element, negative values make it smaller.

What is an inset shadow?

An inset shadow is drawn inside the element's border instead of outside it, creating a pressed-in or recessed look rather than a raised one.

Can I create multiple layered shadows?

This tool generates a single shadow layer. For layered shadows, you can combine multiple box-shadow values (comma-separated) manually using this tool to design each layer individually.