CSS Shadow Generator

The four values, in order

A box-shadow takes horizontal offset, vertical offset, blur radius and spread radius, then a colour. Offsets move the shadow, blur softens its edge, and spread grows or shrinks it before blurring. A negative spread pulls the shadow in, which is the trick for a tight shadow that does not bleed out from under the element.

Layer shadows rather than enlarging one

A single large blurred shadow reads as cheap. Real shadows are the sum of ambient occlusion close to the object and a softer cast shadow further out. Two or three comma-separated shadows, each with a progressively larger offset and blur and a lower opacity, produce a far more convincing result than one shadow at any setting. This is the single biggest difference between a shadow that looks designed and one that does not.

Light comes from above

Almost every interface assumes an overhead light source, so shadows fall downward: a positive vertical offset with zero or near-zero horizontal. A shadow offset sideways reads as wrong because it contradicts an assumption the viewer does not know they are making. Keep the direction consistent across every element on a page, or the surface stops feeling like one plane.

Use transparent black, not grey

A grey shadow looks dead over coloured backgrounds because it does not take on any of the underlying hue. Black at low alpha composites with whatever is behind it and stays believable everywhere. For a richer result, tint the shadow toward the complement of the surface colour rather than reaching for pure grey.

Inset shadows are a different tool

The inset keyword draws the shadow inside the element, which is how pressed buttons, input wells and neumorphic surfaces are made. Inset and outset shadows can be combined in one declaration, which is exactly how the soft-UI look is built.

Performance

Box-shadow is painted, not composited, so animating blur or spread forces repaints and can be janky on lower-end devices. Animate opacity or transform on a pseudo-element carrying the shadow instead, which the compositor can handle on the GPU.

Related tools

• Color Converter — Convert colours between HEX, RGB, HSL, HWB and OKLCH, with alpha support. Runs in your browser and shows the live swatch for each format.
• Accessibility Color Contrast Checker — Check foreground and background colour contrast against WCAG thresholds, with the rules for text size, UI components and states.
• Typography Scale Generator — Generate a modular type scale from a base size and ratio, with fluid clamp() values for responsive layouts.
• Design Token Generator — Generate design tokens as CSS variables, JSON or platform formats, structured in the layers that make them maintainable.