jquery.app
English
EnglishDeutschFrancaisEspanol日本語Nederlands

CSS Tools

CSS Box Shadow Builder

Adjust horizontal and vertical offset, blur radius, spread, color, and inset to generate a clean box-shadow declaration. See a live preview of the shadow as you build it.

Loading tool...

What is CSS Box Shadow Builder?

box-shadow is one of the most commonly used CSS properties for adding depth and elevation to elements, but its multi-value syntax can be confusing, especially when combining offset, blur, spread, color, and the inset keyword. This tool makes the property visual by showing a live preview as you adjust each value, so you can see exactly how the shadow behaves before adding it to your stylesheet.

Quick answer

Generate a box-shadow declaration by adjusting offset, blur, spread, color, and inset. The live preview shows the shadow on a static div so you can tune the values before adding them to your stylesheet.

Limitations

  • The preview is a static div with no surrounding context. A shadow that looks correct in isolation may appear different against a real page background or near other elements.
  • The tool generates one shadow at a time. For layered or multiple shadows you must combine the values manually in your stylesheet.

How to use this tool

  1. Adjust the horizontal and vertical offset to move the shadow position.
  2. Set the blur radius and spread to control softness and size.
  3. Pick a shadow color and toggle inset if the shadow should appear inside the element.
  4. Copy the generated CSS declaration and paste it into your stylesheet.

What you can use it for

  • Add subtle elevation to cards, modals, and dropdown menus.
  • Create inset pressed effects for buttons and form fields.
  • Build layered shadows by combining multiple box-shadow values for realistic depth.

Use cases

Practical examples

Example

Subtle card shadow

A card component needs a light box-shadow to lift it off the page. A small offset and blur with a low-opacity black creates a clean material-style shadow.

Example

Inset form field shadow

A text input can use an inset shadow to suggest depth inside the field. The tool toggles the inset keyword so the shadow renders inside the element border.

Common mistakes

  • Forgetting to add a color value, which can cause the shadow to render as black or inherit unexpected browser defaults.
  • Using a blur radius that is too large, making the shadow nearly invisible on small elements.
  • Not checking that the inset keyword produces the expected inner shadow behavior on the target element.

Verification

  1. Paste the generated CSS into your actual page and inspect the shadow on the real element with its background and adjacent content.
  2. Test the shadow at different element sizes to confirm blur and spread scale as expected.

FAQ

Questions about CSS Box Shadow Builder

What does the spread value do?

Spread expands or contracts the shadow size. A positive spread makes the shadow larger, while a negative spread shrinks it. Zero spread keeps the shadow the same size as the element.

How do I add multiple shadows?

Separate each shadow declaration with a comma. The builder can be used once per shadow, then you combine the values in your stylesheet.

How do I layer multiple shadows?

Write each shadow declaration separated by a comma within the same box-shadow property. The first shadow renders on top and subsequent shadows render underneath. Combine multiple shadows for realistic multi-light-source effects.

When should I use the drop-shadow filter instead?

Use the drop-shadow CSS filter when you need a shadow that follows the exact shape of an element with a transparent background or clipped corners. box-shadow always follows the element CSS box, while drop-shadow follows the rendered pixel contour.

Related tools

More css tools

Also try

Also try