Introduction

In this guide, you will learn how to create your own custom CSS drop shadow animations. It is really easy and useful, so please read this guide until the very end.

Finished Code

See the Pen Untitled by Fire Dingo (@Fire-Dingo) on CodePen.

Step 1: HTML

First off, let’s start by writing some HTML. In this guide, we will use an img tag as our main object to apply animation. You can either write the code entirely from scratch or copy the code I wrote below.

<img src="https://assets.st-note.com/img/1703121447054-We6okqAydF.png?width=800&dpr=2" alt="sled" />

Step 2: CSS

You can add shadows to an element(s) by using box-shadow property. in this guide, I will not explain about this property deeply, but you can check the details on the website pasted below.

box-shadow - CSS: カスケーディングスタイルシート | MDN

box-shadow は CSS のプロパティで、要素のフレームの周囲にシャドウ効果を追加します。カンマで区切ることで、複数の効果を設定することができます。ボックスの影は要素からの相対的な X および Y のオフセット、ぼかしと拡散の半径、色で記述します。

https://developer.mozilla.org/ja/docs/Web/CSS/box-shadow

Firstly, let’s start writing CSS for default conditions. Properties that we need to define are box-shadow and transition. Here is a sample program for the default status styling.

img{
    transition: all .3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

With this code, your element(in this case, an image) should look similar to the photo below.

After this, let’s set up the hover animation. In CSS you can use the transition property to apply simple animations easily. The basic way to use transition property is,

body{
    transition:all /* Duration */ /* Type of animation */;
}

If we apply this, the code will look something like this.

img:hover{
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: all .3s ease-in-out;
}

Now let’s follow step by step on what this code does. On the first line, the code sets the box shadow to the color rgba(0,0,0,0.4). Compared to the default style, the hovered style will decrease the transparency of the shadow.

Secondly, the second line of the code applies ease in our transition for 0.3 seconds, which creates an animated effect of the shadow widening. By applying both the transition and the box-shadow property in two states, the transition property can successfully create a rich animation without any conflict or issues.

Finished code

img{
    transition: all .3s ease-in-out;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
img:hover{
    box-shadow: 0 4px 18px rgba(0,0,0,.4);
    transition: all .3s ease-in-out;
}

Conclusion

This guide explains the best way to add rich box-shadow animation to your website. Sharing our website through social media platforms will be greatly helpful. Thank you for reading.