Box Shadow Generator

CSS Code:

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

Comments (0)

No comments

Be the first to share your thoughts and experience with thousands of others!

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.

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