How do I create a CSS box-shadow effect?

Use the Box Shadow Generator at editpdf.co.in/tools/shadow-generator. Adjust the horizontal offset, vertical offset, blur radius, spread, and color using the visual sliders. The CSS box-shadow property updates in real-time.

Can I add multiple shadow layers?

Yes. Click 'Add Shadow' to add additional shadow layers. Each layer can have independent offset, blur, spread, and color settings. All layers are combined into a single box-shadow CSS property.

What is the difference between box-shadow and drop-shadow?

box-shadow applies a shadow to the rectangular border box of an element. The CSS filter drop-shadow() applies a shadow that follows the shape of the element's content, including transparent areas.

design New Free

CSS Box Shadow Generator

Design CSS box-shadow layers visually. Adjust offset, blur, spread, and color. Stack multiple shadows and copy the final CSS property.

Box Shadow Properties

Horizontal Offset 10px

Vertical Offset 10px

Blur Radius 20px

Spread Radius 0px

Shadow Opacity 0.15

Shadow Color

Box Color

Inset Shadow

Preview

CSS Code

CSS Box Shadow Generator

Related Tools