CSS Box-Shadow Generator

What Is CSS box-shadow?

The CSS property box-shadow adds one or more shadows to an element. Shadows create depth and make elements like cards, buttons and dialogs stand out from the background. You can control offset, blur radius, spread radius, color and the inset mode.

The box-shadow Syntax

The syntax is: box-shadow: [inset] offset-x offset-y blur-radius spread-radius color;. Offset-X and Offset-Y determine the shadow position. Blur radius controls the softness, spread radius enlarges or shrinks the shadow. The inset keyword creates an inner shadow. Multiple shadows are separated by commas.

Tips for Great Shadows

• Use multiple shadows with different blur values for more realistic results.
• Keep shadow colors subtle — use transparent black tones instead of hard colors.
• Inset shadows work great for pressed buttons and input fields.
• Test shadows in both light and dark mode, as they can appear differently.