OnSumoTools

CSS Box-Shadow Generator

This tool builds CSS box-shadow property values using a visual editor. Adjust offset, blur, spread, color, and opacity with sliders, see the result on a live preview element, and copy the ready-to-use CSS. You can layer multiple shadows on a single element. All processing runs in your browser. Your settings and generated code never leave your device.

How does the CSS Box-Shadow Generator work step by step?

The CSS box-shadow property adds shadow effects around an element's frame. Each shadow is defined by four length values, an optional color, and an optional inset keyword. box-shadow syntax: `css box-shadow: [inset] offset-x offset-y blur-radius spread-radius color; `

What does a typical CSS Box-Shadow Generator result look like?

You want a card component with a soft elevation shadow and a subtle colored accent shadow at the bottom. Shadow 1 (elevation): - offset-x: 0, offset-y: 4px, blur: 16px, spread: -2px, color: rgba(0,0,0,0.12)

Frequently asked questions

  • How many shadows can I layer on one element?

    The CSS specification does not define a limit. In practice, most browsers handle up to 10-20 layers without rendering performance issues. The tool supports up to 8 shadow layers in the visual editor, which covers all practical design use cases. Each layer is independently editable. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

  • Is my shadow configuration sent to a server?

    No. The tool runs entirely in your browser. All rendering is done by your browser's CSS engine on the page element itself. The CSS string is assembled by local JavaScript. Nothing is transmitted anywhere.

  • What is the difference between blur-radius and spread-radius?

    Blur-radius controls how soft and diffuse the shadow edge is. A blur of 0 produces a sharp, hard shadow identical to the element's outline. Spread-radius changes the size of the shadow before blurring: positive values make the shadow larger than the element, negative values make it smaller. You can use a large blur with a negative spread to create a soft, contained shadow that does not extend beyond the element's bounds.

  • How do I create an inset shadow (inner shadow)?

    Add the inset keyword to your shadow definition. The tool has an \\\\\\\"inset\\\\\\\" toggle for each shadow layer. Inset shadows render inside the element border rather than outside, useful for pressed or recessed UI states. Test with your actual input data before deploying; edge cases often behave differently than expected with real-world content.

  • What is a negative spread-radius used for?

    Negative spread shrinks the shadow so it is smaller than the element. This is useful when you want a soft blur shadow that appears only below the element (not on the sides), by combining a positive offset-y with a negative spread. Example: box-shadow: 0 8px 16px -8px rgba(0,0,0,0.3) creates a shadow that projects only downward.

  • Does box-shadow affect layout or spacing?

    No. Box shadows do not affect the box model. They do not push neighboring elements or change the element's computed size. If you need space around an element that other elements respect, use the outline property or margin instead.

Related tools

Shadows that don't look pasted on

A single heavy shadow looks fake. Real shadows are soft near the object and fade out far away. Stack a tight small one with a large faint one and it feels natural. This generator lets you layer up to five shadows, each with its own offset, blur, spread and color.

Sliders update a live preview. When it looks right, copy the CSS.

Blur and spread

Blur softens the edge. Spread grows or shrinks the shadow before blurring. A positive spread makes the shadow bigger than the box. A negative spread makes it smaller, which is how you get a shadow that shows only on one side.

That trick is common in cards: a large blur, a negative spread and a vertical offset gives a lifted look with no shadow at the sides.

Inset shadows

Add the inset keyword and the shadow draws inside the box. Use it for pressed buttons, input fields and wells. Combine an inset with a regular shadow for depth.

A starter recipe

Keep opacity low. Three faint layers beat one dark one. Tint the shadow with your background hue rather than pure black, and it'll sit better on colored pages.

  • Layer 1: 0 1px 2px, 10% black
  • Layer 2: 0 4px 8px, 8% black
  • Layer 3: 0 16px 32px, 6% black

Performance

Box-shadow doesn't change layout or spacing, since it's drawn outside the box model. But big blurs and many layers cost paint time, especially on animated or scrolling elements. On low-end phones this adds up. Use fewer layers where it counts.

Nothing you set is sent to a server.

Layered shadows look real

Real shadows aren't one blob. They have a tight, dark edge near the object and a soft, faint spread further out. Stack two or three layers to mimic that: for example 0 1px 2px at low opacity, 0 4px 8px at a bit more and 0 16px 32px faint.

Keep the color tied to your background. A pure black shadow on a colored surface can look dirty. Use a darker, slightly transparent version of the surface hue.

Performance and restraint

Large blurs on many elements cost rendering time, especially on scroll. Use them sparingly on cards that move or animate. For dark mode, shadows matter less; borders or lighter surfaces often show elevation better.

Inset shadows can make inputs look pressed. Use one subtle layer and no more.

Shadow recipes

A soft card: 0 1px 2px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.12). A button press: drop the blur and shrink the offset on :active. A glow: set offset to zero and use a colored, wide blur. Test dark mode, where black shadows nearly vanish and need a lighter tone.