We often like to give some elements or texts a 3D look by providing shadow to them to make it eye-catchy in our web pages. In CSS we can add a shadow effect to both element and text and there are two CSS properties available for the same.

• box-shadow
• text-shadow

The box-shadow property

This property is used to provide shadows to elements. We can provide the horizontal and vertical shadow sizes to the box-shadow property. The default color of the shadow is black.

.box {
   box-shadow: 3px 3px;
}

Shadow color

To specify the shadow color, we can provide a 3^rd value with the color name or color code. The color can be provided in name, HEX, RGB, HSL, etc.

 .box {
     box-shadow: 5px 6px #4d4d4de8;
 }

Shadows blur

To make the shadow blur, we can provide a blur size as 3^rd value.

.box {
   box-shadow: 2px 2px 10px #5a5a5a;
}

Multiple shadows

We can define the multiple shadow properties of an element separated by commas.

.box {
    box-shadow: 2px 2px 10 #5a5a5a, 3px 3px 8px lightgrey, 2px 2px 3px rgb(100, 100, 100);
}

The text-shadow property

This property is used to provide shadows to texts. This property works the same way as box-shadow. We can provide the horizontal and vertical shadow size to the text-shadow property.

.headerText {
   text-shadow: 3px 3px;
}

Shadow color

We can specify the shadow color in name, HEX, RGB, HSL, etc.

.headerText {
   text-shadow: 3px 3px blue; 
}

Shadows blur

To make the shadow blur, we can provide a blur size as 3^rd value.

.headerText {
     text-shadow: 5px 5px 10px #252525;
}

Multiple shadows

We can define the multiple shadow properties of an element separated by commas.

.headerText {
    text-shadow: 1px 1px 3 #430070, 2px 3px 4px lightgrey, 2px 2px 3px rgb(100, 100, 100);
}

Now start creating shadows in CSS and give your HTML boxes a 3D look.

Amitav Mishra

Web Developer by Profession, Blogger by Passion.
JavaScript | React | Next |  Angular | Vue | HTML | CSS