Css style

How to create a drop shadow with CSS

Although design trends vary every year, you can rely on the use of basic shadow effects like shadow box and drop shadow positively contribute to the aesthetics of a website. You can use drop shadows to create pleasing, beautifully rendered effects without looking cheesy.

Let’s take a closer look at 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 is the syntax to apply a CSS drop shadow.

Syntax: 
filter: drop-shadow(offset-x offset-y blur-radius color);

There is a wide range of filter functions, including get confused (), brightness (), and drop shadow ( ).

offset-x determines the horizontal distance and shift-y determines the vertical distance. Note that negative values ​​place the shadow to the left (offset-x) and above (shift-y) The object.

The last two parameters are optional. You can specify the blur radius of the shadow as a length. By default, it is set to 0. You cannot have a negative blur radius.

The shadow color is specified as . If you did not specify a color, it follows the value of the Color property.

When is CSS drop shadow useful?

You might already know that box-shadow does the job pretty well. So you may be thinking, why do we need it drop shadow at all? There are many cases where the drop shadow ( ) function is a lifeline. Let’s take a look at a few of them:

VIDEO OF THE DAY MAKEUSE

Non-rectangular shapes

Unlike a shadow box, you can add a drop shadow with non-rectangular shapes. For example, we have a transparent SVG or PNG with a non-rectangular shape, such as a star. Here, adding a shadow that matches the object itself can be completed either with shadow box Where drop shadow. Consider the two scenarios:

Html








Drop-shadow








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);
}

To go out:


Box-shadow versus drop-shadow on SVG

When comparing the two effects, it is evident that a shadow box gives a rectangular shadow; it doesn’t matter if the image is transparent or already has 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 ( ) the function accepts all type parameters with the exception of insert keyword and spread setting.

Grouped items

There are several cases where you may need to create components by overlapping certain elements. If you use shadow box, you will be faced with the problem of trying to cast a shadow the right way. Here’s how it works when bundling an image and a text component:

Html




smiling girl


Live in the moment


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.




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 shadow box 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);
}

To go out:


Drop shadow and box shadow on grouped elements

As you can see, the shadow box is applied to each element individually while the drop shadow bundle them both together and apply the shadow.

Cut items

You can use the clip path to clip a certain region which determines which parts of an image or element should be displayed. the drop shadow filter allows us to create a drop shadow on the cut element by applying it to the parent of that element:

Html







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;
}

To go out:


Apply a drop shadow on truncated elements

We cut out 50% of the image with a circular path. Therefore, the drop shadow filter applies only to the visible part of the image. Isn’t that awesome?

Limits and differences

As we mentioned above, drop shadow do not support the spread setting. This means that creating an outline effect would not be possible using the drop shadow ( ) function because it is killed everywhere. Besides, it makes different shadow effects of the shadow box and text shadow (with the same parameters). You may have the impression that the differences between the shadow box and drop shadow boil down to the CSS Box Model. One follows him, the other doesn’t. Here is an example :

Html



Every MUO article will bring you one step closer.



Every MUO article will bring you one step closer.



Every MUO article will bring you one step closer.




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;
}

Apply 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;
}

To go out:


Drop shadow against shadow-box against text shadow

You can see that the shadow box gives a thicker and darker shadow than the text shadow and drop shadow. In addition, there is a slight difference in the positioning of the shadow between the text shadow and drop shadow. However, you can prefer different shadow effects as you need.

Browser support

the drop shadow ( ) The feature is supported in all modern browsers except older browsers like Internet Explorer. While this isn’t something that would seriously hamper the UX, you can add a feature request with a shadow box withdraw.


Experiment with different shadow effects

The popularity of shadow box is pretty obvious due to the multitude of use cases. However, the drop shadow ( ) function is heavily underused. We hope you will experience different shadow effects and try to implement drop shadow in your future projects.

Pseudo-classes add a whole new range of functionality to CSS and your personal web development directory. Learn more about them to become a more competent and efficient web developer.


CSS code
How to use CSS box-shadow: 13 tips and examples

Bland boxes look boring. Beautify them with the CSS box-shadow effect!

Read more


About the Author