CSS Box Shadow Generator

How do you generate a CSS box shadow and copy the result?

Adjust the shadow controls and copy the CSS output into the rule for your element. With the initial settings, the generator produces box-shadow: 4px 4px 10px 0px rgba(0,0,0,0.15);. That is one black outer shadow with a 4px horizontal offset, a 4px vertical offset, 10px blur, zero spread and 15% opacity. No preset selection is needed to reproduce this starting example.

The output follows the CSS Backgrounds and Borders box-shadow syntax: horizontal offset, vertical offset, blur radius, spread radius and color, with an optional inset keyword. Positive offsets move the shadow right and down; negative offsets move it left and up. The generator expresses all four lengths in pixels and formats the color as RGBA with two decimal places for opacity.

What do the shadow controls change?

Use the following ranges to tune each layer independently. These are editor limits, rather than a statement about every value accepted by CSS. Keep the preview background close to your intended page background while comparing adjustments: a pale shadow on white can look very different from the same shadow on a dark surface.

Controls available for each shadow layer

Control	Editor range	Purpose
X offset	-50 to 50px	Horizontal displacement
Y offset	-50 to 50px	Vertical displacement
Blur	0 to 100px	Softness of the edge
Spread	-50 to 50px	Expansion or contraction of the shadow shape
Opacity	0 to 1, in 0.05 steps	Transparency of the selected layer color

Blur and spread solve different problems. Increasing Blur softens an edge without changing the Spread setting. A positive Spread grows the shadow shape, while a negative value contracts it before blur. Select Sharp to inspect a hard-edged example: it uses 4px offsets, zero blur, zero spread and fully opaque black. For a border-like ring, set both offsets and Blur to zero, then increase Spread. This remains a shadow rather than an exported border property.

How can you build layered or inset shadows?

The eight presets are Soft, Medium, Large, Floating, Inner, Sharp, Neumorphic (light), and Layered. Selecting one replaces the current layers. Medium contains two shadows; Layered contains three, combining blur values of 2px, 8px and 24px. Use a preset as an editable starting point rather than assuming its appearance will suit every background and element size.

Use + Add layer for another shadow or Duplicate to copy an existing layer immediately below itself. Both controls stop at five layers. Move up and Move down reorder the declarations; the first shadow paints on top. Remove deletes a layer while leaving at least one in the editor. To make a recessed effect, check Inset. Inner starts with inset 0px 2px 4px 0px rgba(0,0,0,0.15); individual layers can mix inner and outer shadows.

What is included in CSS and Tailwind output?

CSS copies a complete box-shadow declaration, including comma-separated layers. Tailwind copies a shadow-[...] arbitrary value class, converting spaces within each shadow to underscores. Tailwind v4 theme instead copies an @theme block containing --shadow-custom. Add that block to the appropriate stylesheet and use shadow-custom on your element.

Background, Box color, Preview size and Preview border radius affect the preview rather than those shadow exports. Card, Button and Input let you inspect different element contexts. Preview size ranges from 100 to 320px; Preview border radius ranges from 0 to 80px. Set the corresponding dimensions, background and radius separately in your project. The CSS Border Radius Generator helps when the box shape also needs adjustment.

How do you export a reusable elevation scale?

Elevation tokens has its own Elevation base color and Elevation opacity controls. It generates five levels using height values of 1, 2, 4, 8 and 16. Each level contains two shadows: the first uses that height as its vertical offset and twice the height as blur; the second doubles both lengths and halves the opacity. Both have zero horizontal offset and zero spread.

At the default elevation opacity of 0.16, Elevation 1 therefore combines 0px 1px 2px 0px rgba(0,0,0,0.16) with 0px 2px 4px 0px rgba(0,0,0,0.08). Click a level to replace the editor layers with it. Open Export tokens to copy all five as CSS custom properties inside :root, or as Tailwind v4 properties inside @theme. These exports come from the elevation controls, independently of later manual edits to Shadow Layers. Browse the design tools for other CSS generators to use alongside the scale.