Box Shadow Generator

CSS box-shadow explained

The CSS box-shadow property adds one or more shadow effects to an element. It has up to six values: inset (optional keyword that makes the shadow appear inside the element), offset-x (horizontal distance), offset-y (vertical distance), blur-radius (how blurry the shadow is — 0 is a sharp edge), spread-radius (expands or contracts the shadow), and color.

Multiple shadows can be layered by separating them with commas. This is used to create complex effects: combining a close hard shadow with a far soft shadow produces a more natural, physically accurate shadow; combining an outer shadow with an inset shadow on the same element creates a depth effect. Great UI shadows typically use multiple very subtle layers rather than one obvious shadow.

The most modern approach to shadows for dark/light mode support uses oklch() or CSS custom properties so shadows automatically adapt to the current theme. For dark mode, shadows may need to be lighter (not darker) to be visible against dark backgrounds.

Common mistakes

• One-size-fits-all shadow — Different elements need different shadow depths. Interactive elements (buttons) typically have small shadows that grow on hover. Cards have medium shadows. Floating elements (modals) have large shadows.
• Hard, saturated shadows — Real shadows are soft and slightly desaturated. Using pure black at high opacity produces harsh, unrealistic shadows. Use low opacity (5–25%) and a slightly warm or desaturated color.

You might also need