Box Shadow Generator

How to use the box shadow generator

1. Start from a preset, or keep the default Soft shadow. The Presets row offers Soft, Hard, Layered, Elevation, Neumorphism, Inner and Glow.
2. In Shadow layers, click a layer to select it. Each layer can be moved with Move up and Move down, or deleted with Remove. Add layer duplicates the selected layer so you can tweak a copy.
3. Edit the selected layer under Edit the selected layer: drag the dot in the Offset pad, or use the sliders and number fields for Horizontal offset (px), Vertical offset (px), Blur (px) and Spread (px).
4. Pick a Shadow color with the color picker or type any CSS color in the code field, then set the Opacity (%). Tick Inset (inner shadow) to draw the shadow inside the box.
5. Adjust the Preview settings (Box color, Background color, Corner radius (px)) to see the shadow on your real colors. They only affect the preview.
6. Copy the declaration from CSS code with Copy.

Keyboard: focus the dot in the Offset pad and use the arrow keys to move it by 1 px, or by 10 px with Shift.

How box-shadow works

The syntax of one shadow is box-shadow: [inset] x y blur spread color.

• x and y move the shadow right and down. Negative values move it left and up. A light source above the element means a positive y.
• Blur softens the edge. It cannot be negative. A blur of 0 gives a hard-edged copy of the box.
• Spread grows (positive) or shrinks (negative) the shadow before it is blurred. A negative spread with a large y keeps the shadow under the element instead of around it.
• Color usually carries transparency. This tool writes opaque colors as HEX and translucent ones as rgba(), which every browser understands. If you type a color that already has an alpha channel, the Opacity (%) multiplies it.
• inset puts the shadow inside the border, as if the box were pressed into the page.

The shadow follows the element’s border-radius and never changes the layout: it takes no space and does not trigger scrollbars.

Why layer several shadows?

Real shadows are not a single blurred rectangle. A small, dark, tight shadow sits right under the object, and a large, faint, blurry one spreads further away. Stacking two to five layers imitates this and looks far more natural than one heavy shadow. The Layered preset doubles offset and blur at each step with a low opacity, a technique popularized by many design systems. Elevation mimics the three-layer shadows of Material Design.

The first layer in the list is painted on top of the others, exactly as in the CSS value. Order matters mostly when you mix inset and outer shadows or use strong colors.

Neumorphism

Neumorphism (“soft UI”) uses two shadows on an element that has the same color as its background: a dark one offset down and right, and a light one offset up and left. The Neumorphism preset sets both colors to #e0e5ec. Keep in mind that this style has low contrast, so buttons built with it need a clear focus state and readable labels.