What is a "Drop Shadow"?
Drop shadow is a commonly supported graphical effect added to an object or layer that casts a shadow under it.
A drop shadow effect can be created manually by copying and pasting the layer, making it a single color such as black, moving it a few pixels toward one direction, and then optionally changing its opacity or blurring it.
Due to this algorithm, a "drop" shadow always leaves a gap between the object and the shadow it casts. It's as if the object is floating above the surface that is its background. This gap is imperceptible when the drop shadow is cast only a few pixels away from the object, but can become undesirable even at distances as small as 3 pixels when applied to the text due to text having many tiny protrusions. An alternative effect, called long shadow, is similar to a drop shadow but makes the gap between the shadow and the source object shadow-colored, getting rid of this problem.
CSS
For a long time now, drop shadow has been supported natively in CSS through the box-shadow and text-shadow properties. The text-shadow property casts a drop shadow from the text, while box-shadow casts a shadow from bounding box of a <div>. Despite the name, box-shadow can also handle round corners nicely, so it's technically possible to make a circle with a drop shadow in CSS by using the box-shadow property with a border-radius: 100%.
.drop-shadow {
/* 10px to the right, 20px below, 5px of blur, 20% opacity black. */
box-shadow: 10px 20px 5px rgba(0 0 0 / 20%)
}See the documentation:
- https://developer.mozilla.org/en-US/docs/Web/CSS/box-shadow (accessed 2025-06-08)