Loading...
Loading...
box-shadow: 5px 5px 15px 0px rgba(0, 0, 0, 0.25);shadow-[5px_5px_15px_0px_rgba(0,0,0,0.25)]Create stunning CSS box shadows for your websites and applications with our free online box shadow generator. Design single or multiple layered shadows with full control over offset, blur, spread, color, and opacity—then copy the CSS code with one click.
Box shadows are essential for modern web design, adding depth, elevation, and visual hierarchy to cards, buttons, modals, and UI elements. Our tool makes it easy to experiment with shadow settings and preview results in real-time.
Intuitive sliders for X/Y offset, blur, spread, and opacity.
Layer up to 5 shadows for complex depth effects.
See your shadow update in real-time with customizable preview.
Copy standard CSS or Tailwind arbitrary value syntax.
A CSS box shadow adds a shadow effect around an element's frame. You can control the horizontal and vertical offset, blur radius, spread radius, and color to create various effects from subtle elevation to dramatic depth.
Blur controls how soft or sharp the shadow edges are—higher values create softer shadows. Spread controls the size of the shadow—positive values expand it, negative values shrink it.
Multiple shadows create more realistic depth. For example, combining a subtle close shadow with a larger distant shadow mimics how real objects cast shadows under ambient light.
An inset shadow appears inside the element instead of outside. It's commonly used for pressed button states, input fields, or creating an engraved effect.