CSS Box Shadow Generator
The CSS box shadow generator lets you build box shadows visually using slider controls for horizontal offset, vertical offset, blur radius, spread radius, color, and opacity. A live preview element updates instantly as you adjust each parameter. When satisfied, copy the complete box-shadow CSS declaration with a single click. Inset mode is included for inner shadow effects.
box-shadow: -46px -30px 0px -7px rgba(0, 0, 0, 0.59);
How to use the CSS box shadow generator
Set the horizontal and vertical offset sliders to control the shadow direction. Positive X values push the shadow right; positive Y values push it down. The blur slider controls how soft or sharp the shadow edge appears, a value of 0 produces a hard, solid shadow and higher values produce a more diffuse glow. The spread value expands or contracts the shadow beyond the natural element boundary.
Use the color picker and opacity slider to set the shadow color. Most UI shadows use a dark, low-opacity value such as rgba(0, 0, 0, 0.15) rather than a pure black to keep them natural-looking. The tool handles the RGBA conversion automatically and outputs a valid box shadow css string ready to paste into your stylesheet.
Inset box shadows and layered effects
Toggle the Inset switch to move the shadow inside the element border. An inset box shadow css appears to push the surface inward, which is useful for pressed button states, input focus rings, and recessed panel effects. When Inset is active, the same X, Y, blur, spread, and color controls apply but the shadow renders on the interior of the element.
CSS supports multiple comma-separated shadow values on a single box-shadow property. After copying the CSS output, add a comma and a second value to layer shadows. A common technique is combining a small close shadow (low blur, low opacity) with a larger diffuse shadow (high blur, low opacity) to create a more realistic depth effect. Copy the output and compose the layered declaration in your stylesheet.
Frequently asked questions
A CSS box-shadow value takes up to six parts: horizontal offset (X), vertical offset (Y), blur radius, spread radius, color, and the optional inset keyword. X and Y set the shadow direction. Blur controls softness, a value of 0 produces a hard shadow. Spread expands or contracts the shadow beyond the element boundary. Color sets the shadow hue and opacity.
Toggle the Inset switch to move the shadow inside the element border rather than outside it. Inset shadows create depth effects like pressed buttons or recessed panels. All other controls, X offset, Y offset, blur, spread, and color, work the same way for inset shadows as for standard outer shadows.
Yes. CSS supports multiple comma-separated shadow values on a single box-shadow property. Copy the CSS output from the generator, add a comma, then paste a second shadow value to layer them. For example, combining a close sharper shadow with a larger diffuse shadow creates a more realistic depth effect on a single element.
box-shadow renders a rectangular shadow that follows the element's box model boundary. filter: drop-shadow() follows the actual rendered shape of the element including transparent areas, making it suitable for irregular shapes like icons and images with transparency. box-shadow supports inset mode and multiple values; filter: drop-shadow() does not.