CSS Box Shadow Generator
Visually design beautiful box-shadows for your web projects. Customize offsets, blur, spread, and colors instantly.
Properties
Horizontal Offset
10pxVertical Offset
10pxBlur Radius
20pxSpread Radius
0pxInset Shadow
Colors
Preview
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
Mastering CSS Box Shadows
The box-shadow CSS property allows you to add shadow effects around an element's frame. It's one of the most powerful tools in modern web design for creating depth, hierarchy, and emphasis without needing image files.
Understanding the Syntax
• Offset-X: Horizontal distance. Positive values move shadow right, negative left.
• Offset-Y: Vertical distance. Positive values move shadow down, negative up.
• Blur Radius: How sharp or blurry the shadow is. 0 is sharp, higher is more blurred.
• Spread Radius: Changes the size of the shadow. Positive expands, negative shrinks.
• Color: The color of the shadow. Using RGBA allows for transparency (alpha channel).
• Inset: Changes the shadow from an outer drop-shadow to an inner shadow.
Design Tips
Layering Shadows
You can apply multiple shadows to a single element by separating them with commas. This creates ultra-realistic, smooth depth effects.
Performance
Large blur radii and spread values can be computationally expensive for the browser to render, especially during scrolling animations.
Neuromorphism
Combine a light top-left shadow and a dark bottom-right shadow (on a matching background) to achieve the popular "Soft UI" look.