Last time , we talked about box-shadow, which is one of the CSS properties. In this article we gonna learn how to add a shadow to a transparent image using CSS.
If you use a transparent image box-shadowas is, it will look different than you might expect and cannot be used as is, so many people may be adding a shadow to the image itself and exporting it.
However, box-shadowusing will not create a beautiful shadow on transparent images, but filter: drop-shadow()using , which we will introduce today, will make it possible to create a beautiful shadow on transparent images.
This time we will look at how to add a shadow to such a transparent image using CSS.
Box-shadow in a transparent image
Before explaining how to use filter, let’s first see what happens when you apply box-shadow directly to a transparent image. The image we will use is the transparent image below.
This image has not been set up yet and is just a display image.
(The gray background is set to make it easier to see that it is a transparent image.)
I’d like to check what happens when I use box-shadow on this image, but before that, let’s quickly review it.
You enter four numbers and a color (plus whether to specify the inside). From the left,
- Horizontal shadow position
- Vertical Shadow Position
- Blur distance (the larger the value, the more blurred)
- Shadow size
In fact, there is a setting that will cause the shadow to be reflected inside the image instead of outside inset. (For more information, see Box-Shadow Guide: Basic Settings, Tips and Examples)
img{
box-shadow: 10px 10px 5px 0px #999;
}The settings are 10px to the right, 10px down, 5px blur, and 0px shadow size, and the image below shows what these settings look like.
As you can see, the shadow is not applied as expected. Even if you try to apply a shadow as usual box-shadow, the shadow will not be applied to the edges of the transparent image.
Since the shadow is reflected on the entire image , box-shadow will be reflected regardless of whether the image is transparent or not.
How to add a beautiful shadow to a transparent image
If it is displayed as shown above, it will look strange, so if you want to add a shadow to a transparent image, you should use a different setting rather than using box-shadow.
Filter: Set using drop-shadow
If you want to add a shadow to a transparent image using CSS, you can use the element filterdrop-shadow() instead of box-shadow and specify the shadow to create a nice effect.
filter: drop-shadow( 10px 10px 5px #999 );It seems like you can imagine it just by looking at it, but it is very similar to the actual setting box-shadow, and from the left of the setting
- Horizontal shadow position
- Vertical Shadow Position
- Blur distance (the larger the value, the more blurred)
- Shadow Color
As you can see, it is similar to box-shadow and you can specify the rgba color in the same way, but there are four setting items, without the option to specify the size of the shadow or set it to the inside.
If you actually display it using filter: drop-shadow() the transparent image settings above , it will look like this.
img{
filter: drop-shadow( 10px 10px 5px #999 );
}
Using this, you can add shadows to transparent images as intended.
Drop shadow for Pseudo elements
This may not be the case very often, but you need to be careful not only when trying to add shadows to transparent images, but also when trying to add shadows to pseudo-elements such as ::before and ::after
This is probably easier to understand if you see an actual example, so I’ve provided a sample below.
Using box-shadow on a pseudo element
First , let’s see what happens when we use box-shadow on the commonly seen speech bubble ▼ pseudo-element .
<div class="sample-box">Box-Shadow<div>.sample-box{
position: relative;
display: flex;
align-items: center;
justify-content: center;
width: 300px;
height: 100px;
margin: 30px 0px 0px;
color: #999;
border-radius: 3px;
background: #ccc;
box-shadow: 5px 5px 3px 0px #999;
}
.sample-box::after{
position: absolute;
content: "";
width: 0;
height: 0;
bottom: -20px;
left: calc(50% - 15px);
border-top: 20px #ccc solid;
border-left: 20px transparent solid;
border-right: 20px transparent solid;
}In this way, if you apply box-shadow to the parent element, the pseudo-element will not have a shadow.
On the other hand, even if you apply box-shadow the same shadow to the pseudo-element, it will not be as intended, as shown below.
<div class="sample-box2">Box-Shadow<div>.sample-box2{
box-shadow: 5px 5px 3px 0px #999;
}
.sample-box2::after{
box-shadow: 5px 5px 3px 0px #999;
}When using filter: drop-shadow on a pseudo element
Just like with transparent images, filter: drop-shadow()if you use pseudo elements, the shadows will be displayed beautifully as intended.
<div class="sample-box3">Box-Shadowdiv>.sample-box3{
filter: drop-shadow( 5px 5px 3px #999 );
}
.sample-box3::after{
}This will create the beautiful shadow you intended. It can be used to add shadows to boxes that contain pseudo elements as well as transparent images.
Summary
I have explained whether this will be the third installment in the series to add shadows filter: drop-shadow().
Previously, we have explained the box-shadow, which is the best way to add shadows, but when using it on a transparent image, the shadow may not come out as intended.
In such cases, usign this filter will allow you to display the shadow neatly with the edges.
Similarly, when using a shadow on a box that contains not only a transparent image but also a pseudo-element, the intended shadow will not be achieved unless you use this just like with a transparent image, so remember to use filter: drop-shadow() rather than box-shadow when adding a shadow to a transparent image and pseudo-element.
The basic usage is not particularly difficult, and if you are familiar with box-shadow you won’t get confused as they are almost the same, so make sure you know how to use them properly so you can build a nice structure!