CSS Box Shadow Generator

Generate custom CSS box shadows with live preview. Adjust offset, blur, spread, color, opacity, and inset shadow, then copy clean CSS instantly.

Developer Tools

Shadow

0px
8px
24px
0px

Appearance

#000000
0.18

Renders the shadow inside the element instead of outside

Preview Settings

16px
#FFFFFF
#F8FAFC

Preview

Generated CSS

.element {
  box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);
}

box-shadow: 0px 8px 24px 0px rgba(0, 0, 0, 0.18);

What is a CSS box shadow?

The CSS box-shadow property adds a shadow effect around an HTML element's frame. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword renders the shadow inside the element border rather than outside.

Box shadows are widely used to add visual depth to cards, buttons, modals, and images — helping elements appear elevated or interactive without additional markup or images. Multiple shadows can be layered by comma-separating values for more sophisticated effects.

How to use this CSS Box Shadow Generator

  1. 1Adjust the Horizontal and Vertical Offset sliders to position the shadow relative to the element.
  2. 2Set the Blur Radius to control how soft or sharp the shadow edges appear.
  3. 3Use the Spread Radius to expand or shrink the shadow beyond the element size.
  4. 4Pick a Shadow Color using the color picker and set Opacity to control intensity.
  5. 5Toggle Inset Shadow on to create a shadow that renders inside the element instead of outside.
  6. 6Use the Preview Settings to test the shadow against different background colors and border radii.
  7. 7Click Copy CSS to copy the generated box-shadow declaration to your clipboard, then paste it into your stylesheet.

Common uses for CSS box shadows

  • Card shadows — adding depth to content cards, panels, and tiles
  • Button hover states — a subtle lift effect to signal interactivity
  • Modal dialogs — elevated appearance that separates them from the page
  • Image containers — framing photos and thumbnails with a soft or hard shadow
  • Dashboard widgets — separating UI sections in admin and analytics interfaces
  • Input focus states — inset shadows to highlight active form fields

Need to pick or convert a shadow color? Use the Color Converter →

Coming soon: CSS Box Shadow Design Patterns

A practical guide covering shadow design tokens, multi-layer shadows, performance considerations, inset shadow techniques, and real-world examples from popular UI frameworks and design systems.

Frequently Asked Questions

What is a CSS box shadow?
A CSS box shadow is a visual effect that adds a shadow around an HTML element using the box-shadow property. It accepts values for horizontal offset, vertical offset, blur radius, spread radius, and color. An optional inset keyword renders the shadow inside the element rather than outside.
How do I use this CSS Box Shadow Generator?
Adjust the sliders for offset, blur, spread, color, and opacity. The live preview updates instantly as you move each control. When satisfied with the result, click Copy CSS to copy the box-shadow declaration directly to your clipboard.
What does blur radius mean in box-shadow?
The blur radius controls how diffuse or sharp the shadow edges appear. A blur of 0 creates a hard, sharp-edged shadow. Higher values create a softer, more spread-out shadow with faded edges.
What does spread radius mean in box-shadow?
The spread radius expands or contracts the shadow size relative to the element. A positive value makes the shadow larger than the element. A negative value shrinks it, producing a tighter shadow.
What is an inset box shadow?
An inset box shadow renders inside the element border rather than outside. It is useful for inner glow effects, pressed button states, and adding inner depth to cards and input fields.
Can I copy the generated CSS?
Yes. Click the Copy CSS button to copy the full box-shadow declaration to your clipboard. You can paste it directly into your stylesheet.
Does box-shadow affect website performance?
Box shadows are GPU-accelerated in modern browsers and have minimal performance impact in most cases. Animating box-shadow on hover can be more expensive than using filter: drop-shadow or opacity transitions. For best performance, avoid simultaneously animating box-shadow on many elements.
Can I use this tool for buttons, cards, and images?
Yes. The CSS box-shadow property works on any HTML element including div, button, img, and input. The generator produces a clean declaration you can apply to any element in your stylesheet.

Related Tools

Color Converter

Convert colors between HEX, RGB, and HSL.

Converters

JSON Formatter

Format, validate, and minify JSON with one click.

Developer Tools

Base64 Encoder / Decoder

Encode text to Base64 or decode Base64 strings online.

Developer Tools

Have feedback or a suggestion? Let us know.