Visually design beautiful box-shadows for your web projects. Customize offsets, blur, spread, and colors instantly.
Horizontal Offset
10pxVertical Offset
10pxBlur Radius
20pxSpread Radius
0pxInset Shadow
Colors
Preview
box-shadow: 10px 10px 20px 0px rgba(0, 0, 0, 0.25);
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.
• 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.
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.
offset: 2px, blur: 4px, color: #000
box-shadow: 2px 2px 4px #000
Creates a basic drop shadow
type: inset, offset: 1px, blur: 2px, color: #fff
box-shadow: inset 1px 1px 2px #fff
Creates an inset shadow effect
offset: 3px, blur: 5px, color: #ff0000
box-shadow: 3px 3px 5px #ff0000
Creates a colored shadow effect
Inset shadows are drawn inside the element, while outset shadows are drawn outside
Separate each shadow with a comma, like this: box-shadow: 1px 1px 2px #000, 2px 2px 4px #fff
Yes, you can combine box-shadow with other properties, such as border-radius or background-color
Yes, box-shadow is supported in most modern browsers, including Chrome, Firefox, and Safari
Use the initial or none value, like this: box-shadow: initial or box-shadow: none
Yes, you can animate box-shadow using CSS transitions or keyframe animations
Common use cases include adding depth to buttons, creating card layouts, and designing modal windows