offset-X: Horizontal shadow offset. Positive values move the shadow right, negative values move it left. Unit: px.
offset-Y: Vertical shadow offset. Positive values move the shadow down, negative values move it up. Unit: px.
blur: Shadow blur radius. Larger values create softer, more diffused shadows. A value of 0 creates a sharp edge. Unit: px.
spread: Shadow expansion radius. Positive values expand the shadow outward, negative values contract it. Unit: px.
color: Shadow color. Any valid CSS color value works. Semi-transparent colors (rgba/hsla) create more natural-looking shadows.
inset: When enabled, the shadow appears inside the element, creating a recessed or inset effect.
box-shadow applies to the entire element box, while text-shadow applies only to text content. box-shadow supports the spread radius and inset option, which text-shadow does not. Both can be used together on the same element.
Use semi-transparent colors (e.g., rgba(0,0,0,0.3)) instead of solid colors, combined with appropriate blur values. Layering multiple shadows (one close/soft + one far/diffused) simulates realistic lighting. Keep offset-X and offset-Y values balanced for a natural look.
Yes. Once loaded, this tool works entirely in your browser with no further network requests. All processing is done client-side.
box-shadow is supported from IE9+ and all modern browsers (Chrome, Firefox, Safari, Edge). No vendor prefixes are needed.
Heavy use of box-shadow (especially large blurred shadows) can impact rendering performance, particularly during animations or scrolling. Avoid applying box-shadow to too many elements simultaneously.
This tool supports up to 3 shadow layers, each independently controlled. Multiple layers are separated by commas and can create rich, layered effects like Material Design elevation shadows.