graphic design Graphic design is a profession, academic discipline and applied art that involves creating visual communications intended to transmit specific messages to social groups, with specific objectives. Graphic design is an interdisciplinary branch of ...

and

computer graphics Computer graphics deals with generating images and art with the aid of computers. Computer graphics is a core technology in digital photography, film, video games, digital art, cell phone and computer displays, and many specialized applications. ...

, a drop shadow is a visual effect consisting of a drawing element which looks like the

shadow A shadow is a dark area on a surface where light from a light source is blocked by an object. In contrast, shade occupies the three-dimensional volume behind an object with light in front of it. The cross-section of a shadow is a two-dimensio ...

of an object, giving the impression that the object is raised above the objects behind it. The drop shadow is often used for elements of a

graphical user interface A graphical user interface, or GUI, is a form of user interface that allows user (computing), users to human–computer interaction, interact with electronic devices through Graphics, graphical icon (computing), icons and visual indicators such ...

such as

window A window is an opening in a wall, door, roof, or vehicle that allows the exchange of light and may also allow the passage of sound and sometimes air. Modern windows are usually glazed or covered in some other transparent or translucent ma ...

s or

menu In a restaurant, the menu is a list of food and beverages offered to the customer. A menu may be à la carte – which presents a list of options from which customers choose, often with prices shown – or table d'hôte, in which case a pre-est ...

s, and for simple text. The text label for

icon An icon () is a religious work of art, most commonly a painting, in the cultures of the Eastern Orthodox, Oriental Orthodox, Catholic Church, Catholic, and Lutheranism, Lutheran churches. The most common subjects include Jesus, Mary, mother of ...

s on desktops in many

desktop environment In computing, a desktop environment (DE) is an implementation of the desktop metaphor made of a bundle of programs running on top of a computer operating system that share a common graphical user interface (GUI), sometimes described as a graphi ...

s has a drop shadow, as this effect effectively distinguishes the text from any colored background it may be in front of. A simple way of drawing a drop shadow of a rectangular object is to draw a gray or black area underneath and offset from the object. In general, a drop shadow is a copy in black or gray of the object, drawn in a slightly different position. Realism may be increased by: # Darkening the colors of the pixels where the shadow casts instead of making them gray. This can be done with

alpha blending In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency. It is often useful to render picture elements (pixels) in separate pass ...

the shadow with the area it is cast on. # Softening the edges of the shadow. This can be done by adding

Gaussian blur In image processing, a Gaussian blur (also known as Gaussian smoothing) is the result of blurring an image by a Gaussian function (named after mathematician and scientist Carl Friedrich Gauss). It is a widely used effect in graphics software, ...

to the shadow's

alpha channel In computer graphics, alpha compositing or alpha blending is the process of combining one image with a background to create the appearance of partial or full transparency. It is often useful to render picture elements (pixels) in separate pass ...

before blending. Inset drop shadows are a type which draws the shadows inside the element. This allows the interface element to appear as if it is sunken into the interface.

Photo editing

In photo editing or photography post-production, a drop shadow may be added right beneath a model or product in the image. It is used to create contrast between the background and the subject. To add a drop shadow, retouchers use graphic editing tools like

Adobe Photoshop Adobe Photoshop is a raster graphics editor developed and published by Adobe Inc., Adobe for Microsoft Windows, Windows and macOS. It was created in 1987 by Thomas Knoll, Thomas and John Knoll. It is the most used tool for professional digital ...

. Drop shadows are often used as a visual effect in e-commerce. This is done to improve the presentation of product images and create depth in the image.

Use

Window border in the compositing and stacking window managers

Generally, window managers which are capable of compositing allow drop shadow effects, whereas incapable window managers do not. In some operating systems like

macOS macOS, previously OS X and originally Mac OS X, is a Unix, Unix-based operating system developed and marketed by Apple Inc., Apple since 2001. It is the current operating system for Apple's Mac (computer), Mac computers. With ...

, drop shadow is used to differentiate between active and inactive windows. Websites are able to use drop shadow effects through the CSS properties box-shadow, text-shadow, and drop-shadow() filter function in filter. The first two are used for elements and text respectively, while the filter applies to the element's content, letting it support oddly shaped elements or transparent images.

External links

Drop shadow definition
at

Mozilla Mozilla is a free software community founded in 1998 by members of Netscape. The Mozilla community uses, develops, publishes and supports Mozilla products, thereby promoting free software and open standards. The community is supported institution ...

References

{{compu-graphics-stub Computer graphics Graphic design Shadows