Box Shadow Generator

The Shadow Generator uses sliders to tune the parameters of a CSS box-shadow. A white card at the top shows the effect live, and the CSS code below is ready to copy. It's useful for quickly finding a suitable shadow for a button, card or dialog, without editing code and reloading over and over. It produces a single-layer shadow only: no stacked layers, no text-shadow and no filter: drop-shadow for images.

How to use

1. Look at the preview area at the top: a white rounded card sits on the page's background color, and the shadow is applied to that card.
2. Drag the four sliders. 'Horizontal offset', 'Vertical offset' and 'Spread' each run from -50 to 50 pixels, and 'Blur radius' runs from 0 to 100 pixels. The label shows the current value as you drag.
3. Choose the shadow color with the 'Shadow color' picker (default black, #000000), then use the 'Opacity' slider (0% to 100%, default 20%) to set how strong it is.
4. For a recessed, inward look, tick 'Inset shadow (inward, recessed effect)'.
5. Read the result in the 'CSS code' box at the bottom, click 'Copy' at the top right (it shows 'Copied'), and paste it into your stylesheet.

What each parameter does

A box-shadow is written as: offset-x offset-y blur spread color. A positive horizontal offset moves the shadow right and a negative one moves it left; a positive vertical offset moves it down and a negative one up. A larger blur radius makes the edge softer and more diffuse, and 0 gives a hard-edged shadow. A positive spread makes the shadow larger than the element, and a negative spread makes it smaller; a negative spread with a larger blur is a common way to get a shadow that shows only a little along the bottom. When you combine color and opacity, the tool converts the hex color to rgba. Here are results computed with the tool's own conversion logic. The defaults (0, 8, 20, 0, black, opacity 20%) give box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.20);. As a second case, color #1F2A44, opacity 35%, inset ticked, offsets 0 and 2, blur 6 and spread -1 give box-shadow: inset 0px 2px 6px -1px rgba(31, 42, 68, 0.35);.

Supported range and known limits

• One shadow layer only. The layered shadows common in design (a soft ambient shadow plus a tighter contact shadow) require you to join several box-shadow values with commas yourself.
• Units are always px; there's no em, rem or percentage, and a value of 0 is still written as 0px.
• Color is chosen with the picker and opacity is set separately. The output is always in rgba form, never hex or hsla.
• The preview is a fixed 160×100 white rounded card on the page background. It doesn't represent your real element or your page background; on a dark or colored background the same shadow looks different, so check the final result in your actual page.
• Slider ranges are limited (offsets and spread ±50, blur up to 100). For a more extreme shadow, copy the code and edit the numbers by hand.
• The inset option simply adds the inset keyword to the output. The preview card is white, so an inset shadow can be subtle; increase the offsets to see it more clearly.
• Your settings aren't saved; reloading restores the defaults.

FAQ: My shadow looks too heavy or dirty. What can I do?

The usual causes are too much opacity or a pure black color. Try lowering opacity to somewhere around 10% to 20% and increasing the blur radius. For a more natural look, designers often tint the shadow with a muted dark blue or gray instead of pure black. That's a design rule of thumb, and the right result depends on your page.

FAQ: How do I get a shadow only along the bottom edge?

Set the vertical offset to a positive number, keep the horizontal offset at 0, and set spread to a negative value (for example -5 to -10). The shadow then shrinks in beneath the element and only peeks out at the bottom. You can watch it happen in the preview as you drag the sliders.

FAQ: Does a shadow affect layout or performance?

A box-shadow takes up no layout space and doesn't push neighboring elements away. A large blur radius can increase painting cost, though, especially on many elements or on animated ones. If a page feels sluggish, reduce the blur radius or the number of elements with shadows.

FAQ: Where can I use the copied code?

You get a complete CSS declaration on one line, such as box-shadow: ...;, which can go into a CSS file, a style tag or an inline style. In a React inline style object, rewrite it as boxShadow: "..." and use just the value inside the quotation marks.

Privacy and processing

All the work happens in your browser: the hex color is converted to rgba and joined into a CSS string. No network requests are made, and your settings aren't uploaded or saved. Clicking Copy only writes that line of text to your clipboard.