CSS Box Shadow Generator
Create beautiful drop shadows and inner shadows with this visual CSS box shadow generator. Adjust the settings below and watch the preview update in real-time. Copy the generated CSS code to use in your projects.
Shadow Layers
How to Use the Box Shadow Generator
Horizontal Offset: Moves the shadow left or right. Positive values move it right, negative values move it left.
Vertical Offset: Moves the shadow up or down. Positive values move it down, negative values move it up.
Blur Radius: Controls how blurry the shadow appears. Higher values create softer shadows.
Spread Radius: Makes the shadow larger or smaller than the element. Positive values expand it, negative values shrink it.
Color & Opacity: Choose the shadow color and how transparent it appears.
Inset: Creates an inner shadow instead of an outer drop shadow.
Multiple Layers: Add multiple shadows to create complex shadow effects by layering them.
