CSS Box Shadow Generator

How to Use

1. Adjust horizontal and vertical offset to position the shadow.
2. Set blur radius for softness and spread radius for size.
3. Pick a color and adjust opacity for the shadow.
4. Toggle inset for inner shadows.
5. Copy the generated CSS with the copy button.

CSS Box Shadow

The CSS box-shadow property adds shadow effects around an element's frame. You can set multiple effects including the offset, blur radius, spread radius, color, and whether the shadow is inset. It is commonly used for cards, buttons, modals, and any element that needs visual depth or elevation.

Value Reference

• Horizontal offset: Positive values move the shadow right; negative values move it left.
• Vertical offset: Positive values move the shadow down; negative values move it up.
• Blur radius: Higher values create a softer, more diffused shadow. 0 means a sharp edge.
• Spread radius: Positive values expand the shadow; negative values shrink it.
• Inset: Moves the shadow inside the element, creating a pressed or recessed look.

Use Cases

• Card elevation: Add subtle shadows to cards to create a layered, material-design-inspired interface.
• Button states: Use shadows on hover or active states to give buttons a pressed or raised appearance.
• Modals and popups: Apply strong shadows to overlay elements to visually separate them from the background.
• Neumorphism: Combine inset and outset shadows with matching background colors to create the soft, extruded look of neumorphic design.
• Image galleries: Add shadows to thumbnails or featured images to make them stand out from the page.

Design Tips

• Use multiple layered shadows (light and subtle) for a more realistic and natural depth effect.
• Keep shadow colors desaturated and close to the background color rather than using pure black.
• Large blur values with small offsets create soft, ambient shadows that feel modern and clean.
• Use inset shadows sparingly — they work well for input fields and pressed buttons but can look heavy on large areas.
• Consider performance: complex box-shadows on many elements can affect rendering speed on lower-end devices.

Privacy

All processing happens in your browser. No data is sent to any server.