CSS Box Shadow Generator: Live Preview and Copy Code

CSS Box Shadow Generator

This generator builds a single CSS box-shadow value from six controls: horizontal offset, vertical offset, blur radius, spread radius, a shadow color with its own opacity slider, and an inset toggle. Two more color pickers set the preview box and its background so the shadow reads correctly against light or dark surroundings, and four presets, soft, hard, glow, and inset, each load a ready-made combination in one click. Every change updates the box-shadow line beneath the preview, ready to copy.

How the box-shadow value is built

CSS writes a shadow as a fixed sequence of numbers: horizontal offset, vertical offset, blur radius, spread radius, then a color, with the word inset placed in front for a shadow drawn inside the box edge instead of behind it. Horizontal and vertical offset move the shadow sideways or vertically and both accept negative values down to -50px, so a shadow can fall to the left of the box or sit above it. Blur radius, from 0 to 100px, softens the shadow's edge, and spread radius, from -50 to 50px, grows or shrinks the shadow independently of the box's own size. The color picker's hex value splits into its red, green, and blue components, and the opacity slider, from 0 to 1, becomes the fourth number inside rgba().

Worked example

Setting horizontal offset to 6px, vertical offset to 6px, blur to 16px, and spread to 2px, with the shadow color at #1e293b and opacity at 0.35, produces box-shadow: 6px 6px 16px 2px rgba(30, 41, 59, 0.35). The hex color #1e293b splits into red 30, green 41, and blue 59, and the 0.35 from the opacity slider becomes the fourth rgba() value with no further conversion. Turning on inset with the same six values draws the identical shadow inside the box's edge rather than behind it, an effect commonly used for pressed buttons or recessed input fields.

Copy-paste CSS output

.card {
  box-shadow: 6px 6px 16px 2px rgba(30, 41, 59, 0.35);
}