CSS Box Shadow Generator
Build CSS box shadows visually with live preview. Adjust offset, blur, spread, colour, and opacity. Stack multiple layers and copy the CSS.
CSS Box Shadow Generator
Create and customize multiple shadow layers with live preview
Quick Presets
Shadow Layers (1)
Shadow 1
0px
4px
6px
0px
10%
CSS Output
box-shadow: 0px 4px 6px 0px rgba(0, 0, 0, 0.1);
Related Tools
CSS Gradient Generator
💻 Developer ToolsCreate beautiful CSS gradients with a visual builder. Choose colours, positions, angles, and gradient type. Copy the CSS with vendor prefixes.
Pixel to REM Converter
💻 Developer ToolsConvert pixels to REM units and back. Set your base font size, see a reference table of common values, and copy CSS with one click.
Colour Contrast Checker
🎨 Creative & DesignCheck if your text and background colours meet WCAG accessibility standards (AA & AAA). Auto-fix suggestions included