Most folks know about the box-shadow
property and use it a lot already in their CSS, however there are certain scenarios where a box-shadow doesn't give us ideal results. There is however also a CSS filter called drop-shadow
that let's us do some cool things we cannot achieve with box-shadows. It's currently supported in all modern browsers and definitely worth a look. Here's how a drop-shadow looks like in CSS:
.selector {
filter: drop-shadow(0 10px 12px rgba(0, 0, 0, 0.4));
}
What's the use case?
While box-shadows are sufficient in most scenarios, they can only give us a shadow around the exact shape of an element, which is usually angular or round due to a border-radius
. With drop-shadows however, we can cast a shadow around elements and even images that stays in direct proximity to the non-transparent parts of the image or element.
So in essence this works on regular HTML elements, SVGs and also transparent PNGs. Here's an example:
.triangle {
width: 180px;
height: 180px;
background: linear-gradient(45deg, yellow 50%, transparent 50%);
filter: drop-shadow(0.2rem 0.2rem 1rem rgba(0,0,0, 0.8));
}
One downside we can spot in the syntax here is that we're not able to set a spread parameter the shadow should have. Other than that, the parameters match what we're used to with box-shadows (x-offset, y-offset, blur, color).
The real magic however becomes more obvious when we apply a drop-shadow to a transparent PNG, which gives us the same effect as seen above, instead of just putting a shadow on the whole image or container, we see the shadow aligned to the filled lines and shapes.
<style>
img {
filter: drop-shadow(0.5rem 0.5rem 0.5rem rgba(0, 100, 200, 0.7));
}
</style>
<img src="./waves.png">
Stay tuned for more frontend-focused articles like this 👉 https://allround.io
Top comments (0)