Skip to main content

Box Shadow Generator

Interactive tool to generate CSS box-shadow properties with live preview. Adjust shadow parameters and copy the generated CSS code.

Shadow Preview

Generated CSS Code

Copy the generated CSS code to your clipboard

box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.2);
background-color: #1149ee;

Shadow Configuration Controls

Shadow Position and Size Settings

Shadow Position Controls

Negative values move shadow left, positive values move right

Negative values move shadow up, positive values move down

Higher values create more blurred, softer shadows

Positive values expand shadow, negative values contract it

Shadow Color and Style Settings

Shadow Appearance Controls

Choose the base color for your shadow

0% is fully transparent, 100% is fully opaque

Background color of the element receiving the shadow

Background color of the preview area

Creates an inner shadow inside the element instead of outside

Discussion

0 comments

Share your thoughts and help others with your experience

?

No comments yet

Be the first to share your thoughts and help others with your experience using this tool!

Related Tools

CSS Gradient Generator

Create and customize beautiful CSS gradients with presets or custom settings.

CSS Glassmorphism Effect

Apply glassmorphism effects to your UI elements.

CSS Minifier

Minify your CSS code to reduce file size and enhance performance.

CSS Formatter

Beautify and format your CSS code for improved readability and structure.

About Box Shadow Generator

What is Box Shadow?

Box shadow is a CSS property that adds shadow effects around an element's frame. It allows you to create depth and visual interest in your web designs by casting shadows behind elements.

How to Use This Tool

  • Adjust the horizontal and vertical offsets to position your shadow
  • Control the blur radius for soft or sharp shadows
  • Use spread radius to expand or contract the shadow
  • Customize colors and opacity for perfect styling
  • Toggle inset for inner shadow effects

Shadow Properties Explained

Horizontal Offset
Moves shadow left (negative) or right (positive)
Vertical Offset
Moves shadow up (negative) or down (positive)
Blur Radius
Controls how blurred the shadow appears
Spread Radius
Expands (positive) or contracts (negative) the shadow