What Is a Drop Shadow In Web Design?

Table of Contents

A drop shadow is a visual effect in graphic design where one draws a copy of an object in black or gray in a slightly different position to look like the object’s shadow. 

This effect gives the effect of elevating the object above those behind it. The drop shadow also distinguishes text from other items with a colored background.

When Should You Use Drop Shadow?

Designers can use a drop shadow for graphical user interface elements like simple text, menus, or windows. For example, the text label for many desktop icons has a drop shadow, as this tool successfully highlights text from what is in the background. The typical use is to draw a black or a gray area underneath the object and position it slightly differently.

Another method to make items look more realistic is by darkening the pixel colors where the shadow casts rather than making them gray. This effect can be achieved by alpha blending the shadow with the space where it is cast. Another way is to soften the shadow’s edges by adding a Gaussian blur to its alpha channel before blending.

Lastly, inset drop shadows draw the inside elements of the shadow, allowing the element interface to seem sunken.


Recommended From Elementor

The Future
of Web Creation. Straight to
Your Inbox.

What Intrests You?


Awsome content is on the way.