CSS Box-Shadow Generator

Adjust the sliders to preview and copy box-shadow styles in CSS or SCSS formats.

Horizontal Offset: Vertical Offset: Blur Radius: Spread Radius: Shadow Color:

Inset Shadow

Preset Styles: Preview Shape:

Generated CSS:

Generated SCSS:

How to Use This Tool

This tool helps you build CSS box-shadow styles with live preview and export options. You can tweak offsets, blur, spread, color, and shadow type. Choose from built-in presets or create your own.

Example Output:

box-shadow: 10px 10px 15px 0px rgba(0, 0, 0, 0.3);