Loading...
Create CSS box shadows with multiple layers, live preview, and copy-ready code.
CSS box-shadow adds shadow effects around an element's frame using horizontal/vertical offsets, blur, spread, and color values. Multiple layers create depth and realistic lighting.
box-shadow: 0px 4px 6px -1px rgba(0, 0, 0, 0.1), 0px 2px 4px -2px rgba(0, 0, 0, 0.06);X/Y Offset: Moves the shadow horizontally and vertically. Positive X moves right, positive Y moves down.
Blur: Controls shadow softness. 0 = sharp edge, higher = more diffused.
Spread: Expands or shrinks the shadow. Negative values create tighter shadows.
Opacity: Adjusts shadow transparency for subtle or bold effects.
Formula
box-shadow: inset? offset-x offset-y blur-radius spread-radius coloroffset-x, offset-y = how far the shadow moves right and down, and negative values move it the other way
blur-radius = the size of the fade, roughly twice the visual blur you see
spread-radius = grows or shrinks the shadow before it is blurred
inset = draws the shadow inside the box instead of behind it
Did you know? Shadows stack. A comma separated list draws each in order, first on top, and layering two or three with increasing blur and falling opacity is what makes a shadow look like real light rather than a grey halo.
Sources
Convert text to ASCII codes and back. Supports decimal, hex, binary, and octal formats.
Calculate required internet bandwidth based on devices and activities in your household.
Encode and decode Base64 strings. Convert text for data URIs, APIs, and safe data transmission.
Create CSS border-radius with visual controls for each corner. Generate circles, pills, and custom shapes.
Preview how colors appear with different types of color blindness. Test accessibility for color vision deficiency.
Convert colors between HEX, RGB, HSL, and OKLCH. Includes alpha support and copy buttons for CSS-ready formats.