littlekit.
Free. No account.
Tool reference

CSS Box Shadow Generator: instructions, examples and limits

CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.

Open CSS Box Shadow Generator
Processing location: your browser

This tool is registered for local processing. Its tool input is handled in the current page; LittleKit’s product analytics do not include the input value.

What it does

CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.

Worked example

0px 8px 24px 0px produces a downward soft shadow.

The example demonstrates the operation. For file-based tools, results depend on the selected file and options.

How the result is produced

CSS box-shadow uses horizontal offset, vertical offset, blur radius, spread radius and colour.

Important limits

One outer shadow, with an opaque colour. Negative blur values are invalid.

Choosing the next step

Start with the representation your design system already uses. Use the contrast checker for a foreground/background pair, then test the actual font size and weight in context. A mathematically valid colour value can still be a poor interface choice.

Colour PickerThe native colour picker supplies an sRGB colour; the tool displays HEX, RGB and HSL equivalents.Contrast CheckerWCAG 2.x: linearize sRGB at 0.04045, L = 0.2126R + 0.7152G + 0.0722B.HEX ↔ RGBHEX encodes three 8-bit sRGB channels in base 16; RGB shows them as decimal values.

See a mismatch between these instructions and the tool? Report a correction with a non-sensitive example.