dropshadow

A dropshadow (or drop shadow) is a visual effect used to create a shadow behind an object, giving the impression that the object rests on a surface and has a light source. It can be applied to text, icons, images, and UI components. The effect is widely used in graphic design, digital interfaces, and print to convey depth and separation from the background.

Technical implementation varies by platform. In raster image editors and vector software, a drop shadow is typically produced by offsetting a copy of the object's silhouette, blurring it, and tinting it with a color and opacity. In web design, drop shadows can be created with CSS using filters such as filter: drop-shadow(...) or with box-shadow for element-shaped shadows. Common parameters include the horizontal and vertical offset (how far the shadow is displaced), the blur radius (softness), the spread (optional, for box-shadow), and the color and opacity of the shadow. The illusion can be two-dimensional or adjusted to match a light source.

Design considerations: appropriate drop shadows should align with the scene's lighting, and overly strong shadows can reduce readability or appear artificial. They may also affect performance in real-time rendering, especially with many layered shadows. On some backgrounds, hard-edged shadows can be more legible than soft ones. Accessibility guidelines suggest ensuring sufficient contrast between foreground content and the shadowed area, and avoiding shadows that obscure critical text. In practice, drop shadows are a standard tool for adding depth, emphasis, and visual hierarchy in user interfaces and visual media.