Box Shadow Generator

Design

Create and customize layered CSS box shadows with a real-time preview. Adjust the settings to get the perfect shadow for your elements.

Adjust properties: Use the sliders to control the shadow's offsets, blur, and spread.
Set color and opacity: Pick a color and adjust its transparency.
Toggle Inset: Switch to an inner shadow if needed.
Preview & Copy: See the live preview and copy the generated CSS code.

Horizontal Offset10px

Vertical Offset10px

Blur Radius5px

Spread Radius0px

Shadow Color

Opacity

Inset Shadow

Preview

box-shadow: 10px 10px 5px 0px rgba(0, 0, 0, 0.5);

Loading Ad...

Related Tools

Explore other tools in the Design category.

Visualize and generate CSS border-radius.

Convert between HEX, RGB, and HSL values.

Generate color palettes from a single color.

Generate lighter and darker shades of a color.

Preview CSS animations and get the code to use them.

Create the popular glassmorphism effect for your UI elements.