How to Create a Drop Shadow With CSS
Though design trends vary every year, you can
count on the use of staple shadow effects like box-shadow and drop-shadow to
positively contribute to a website's aesthetics. You can use drop-shadows to
create pleasant, beautifully rendered effects without coming off as cheesy.
Let’s take a closer look at the CSS drop-shadow property.
What Is CSS drop-shadow?
drop-shadow(
) is a CSS effect that displays a shadow
around the shape of a specified object. Here's the syntax for applying a CSS drop-shadow.
Syntax:
filter: drop-shadow(offset-x offset-y blur-radius color);
There are a wide range of filter
functions including blur(
), brightness(
), and drop-shadow(
).
offset-x determines
the horizontal distance and offset-y determines
the vertical distance. Note that negative values place the shadow to the left (offset-x) and
above (offset-y) the
object.
The last two parameters are optional. You can
specify the blur radius of the shadow as a length. By default, it's set to 0.
You cannot have a negative blur radius.
The color of the shadow is specified as <color>. If you
haven’t specified a color, it follows the value of the color property.
When Is CSS drop-shadow
Useful?
You may already know that box-shadow does
the job pretty well. So, you may think, why do we need drop-shadow at
all? There are numerous cases where the drop-shadow(
) function is a lifesaver. Let’s take a look at a
few of them:
Non-Rectangular Shapes
Unlike a box-shadow, you
can add a drop-shadow to
non-rectangular shapes. For instance, we have a transparent SVG or PNG with a
non-rectangular shape—a star for instance. Here, adding a shadow that
corresponds to the object itself can be completed with either box-shadow or drop-shadow.
Consider both scenarios:
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Drop-shadow</title>
</head>
<body>
<div class="star-img">
<img class="box-shadow" src="star.svg" alt="">
<img class="drop-shadow" src="star.svg" alt="">
</div>
</body>
</html>
CSS
.star-img img {
display: inline-block;
height: 15em;
width: 25em;
}
.box-shadow {
color: red;
box-shadow: 0.60em 0.60em 0.2em;
}
.drop-shadow {
filter: drop-shadow(0.60em 0.60em 0.2em);
}
When comparing both effects, it's apparent that
a box-shadow gives
a rectangular shadow; it also doesn’t matter whether the image is transparent
or already possesses a background. On the other hand, drop-shadow allows
you to create a shadow that conforms to the shape of the image itself.
The limiting factors are that the drop-shadow( ) function
accepts all parameters of type <shadow> except
the inset keyword
and spread parameter.
Grouped Elements
There are several instances when you may need
to build components by overlapping certain elements. If you're using box-shadow, you’ll
face the issue of trying to cast a shadow the right way. Here's how it works
when grouping an image and a text component:
HTML
<body>
<div class="parent-container drop-shadow">
<div class="image-container box">
<img src="smiling-girl.jpg" alt="smiling girl" />
</div>
<div class="text-container box">
<h2>Live in the moment</h2>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Voluptas porro quo nam odit, non debitis, facilis eligendi ea labore obcaecati ut quia asperiores. Modi, corrupti commodi quisquam ex numquam incidunt.</p>
</div>
</div>
</body>
Basic CSS
body {
padding: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
h2 {
font-size: 2rem;
}
p {
font-size: 0.8rem;
}
.parent-container {
display: flex;
flex-direction: column;
height: 17rem;
width: 50em;
}
.image-container img {
width: 15em;
position: absolute;
z-index: 1;
top: 2em;
left: 1.5em;
}
.text-container {
color: rgb(255, 236, 236);
background-color: rgb(141 0 35);
width: 30rem;
padding: 3rem;
align-self: flex-end;
position: relative;
}
Now, apply the box-shadow and drop-shadow to
see the difference.
.drop-shadow {
filter: drop-shadow(0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.5));
}
.box,
.box img {
box-shadow: 0.4rem 0.4rem 0.45rem rgba(0, 0, 30, 0.3);
}
As you can see, the box-shadow is
applied on each element individually while the drop-shadow groups
both of them and applies the shadow.
Clipped Elements
You can use the clip-path property
to clip a certain region that determines what parts of an image or element
should be shown. The drop-shadow
filter allows us to create a drop-shadow on
the clipped element by applying it to the parent of that element:
HTML
<body>
<div class="parent-container">
<div class="clipped-element">
</div>
</div>
</body>
CSS
.parent-container {
filter: drop-shadow(0rem 0rem 1.5rem maroon);
}
.clipped-element {
width: 50em;
height: 50em;
margin: 0 auto;
background-image: url(smiling-girl.jpg);
clip-path: circle(50%);
background-size: cover;
background-repeat: no-repeat;
}
We've
clipped 50% of the image with a circular path. Therefore, the drop-shadow filter is
applied to only the visible part of the image. Isn’t it awesome?
Limitations and Differences
As we discussed above, drop-shadow doesn’t
support the spread parameter.
This means that creating an outline effect wouldn’t be possible using the drop-shadow( ) function
because it gets killed everywhere. Also, it renders different shadow effects
from the box-shadow and text-shadow (with
the same parameters). You may feel that the differences between the box-shadow and drop-shadow boil
down to the CSS Box Model.
One follows it while the other doesn't. Here's an example:
HTML
<body>
<div class="parent-container">
<p class="drop-shadow">Every MUO article will bring you one step closer.</p>
<p class="box-shadow">
Every MUO article will bring you one step closer.
</p>
<p class="text-shadow">
Every MUO article will bring you one step closer.
</p>
</div>
</body>
Basic CSS
body {
padding: 5em 1em;
font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande',
'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
}
.parent-container {
width: 72rem;
}
p {
font-size: 3em;
font-style: bold;
}
Applying shadow-effects
.drop-shadow {
filter: drop-shadow(0.5em 0.5em 0.1em #555);
}
.box-shadow {
box-shadow: 0.5em 0.5em 0.1em #555;
}
.text-shadow {
text-shadow: 0.5em 0.5em 0.1em #555;
}
You can see that the box-shadow gives
a heavier, darker shadow than the text-shadow and drop-shadow. Also,
there's a slight difference in the shadow's positioning between the text-shadow and drop-shadow.
Nevertheless, you may prefer different shadow effects according to your
requirements.
Browser Support
The drop-shadow(
) function is supported in all modern browsers
except older browsers like Internet Explorer. Though it isn’t something that
would seriously hamper the UX, you can add a feature query with a box-shadow fallback.
Experiment
With Different Shadow Effects
The popularity of box-shadow is
quite obvious because of the multitude of use cases. However, the drop-shadow( ) function
is highly under-utilized. We hope that you’ll experiment with different shadow
effects and try to implement drop-shadow in
your future projects.
Pseudo-classes add an entirely new range of
functionality to CSS and your personal web development repertoire. Learn more
about them to become a more proficient and efficient web developer.