You can change an element’s background color, font style, font color, box-shadow, margin, and numerous other properties using CSS. We’ll walk you through some effective uses of box-shadow in this guide.

What Is CSS box-shadow?

The box-shadow property is used to apply a shadow to HTML elements. It’s one of the most used CSS properties for styling boxes or images.

CSS Syntax:

horizontal offset: If the horizontal offset is positive, the shadow will be to the right of the box. And if the horizontal offset is negative, the shadow will be to the left of the box. vertical offset: If the vertical offset is positive, the shadow will be below the box. And if the vertical offset is negative, the shadow will be above the box. blur radius: The higher the value, the more blurred the shadow will be. spread radius: It signifies how much the shadow should spread. Positive values increase the spread of the shadow, negative values decrease the spread. Color: It signifies the color of the shadow. Also, it supports any color format like rgba, hex, or hsla.

The blur, spread, and color parameters are optional. The most interesting part of box-shadow is that you can use a comma to separate box-shadow values any number of times. This can be used to create multiple borders and shadows on the elements.

1. Add a Dim box-shadow to the Left, Right, and Bottom of the Box

You can add very dim shadows to three sides (left, right and bottom) of the box using the following box-shadow CSS with your target HTML element:

Output:

2. Add a Dim box-shadow to All Sides

You can add light shadows to all sides of the box using the following box-shadow CSS with your target HTML element:

Output:

3. Add a Thin box-shadow to the Bottom and Right Sides

You can add shadows to the bottom and right side of the box using the following box-shadow CSS with your target HTML element:

Output:

4. Add a Dark box-shadow to All Sides

You can add dark shadow to all sides of the box using the following box-shadow CSS with your target HTML element:

Output:

5. Add Spread Shadow to All Sides

You can add spread shadow to all sides of the box using the following command with your target HTML element:

Output:

6. Add a Thin Border Shadow to All Sides

You can add a simple border shadow to all sides of the box using the following CSS with your target HTML element:

Output:

7. Add a box-shadow to the Bottom and Left Sides

You can add a shadow to the bottom and left sides of the box using the following box-shadow CSS with your target HTML element:

Output:

8. Add a Dim box-shadow to the Top and Left Sides, Dark Shadow to the Bottom and Right Sides

You can add a light shadow to the top and left side of the box as well as a dark shadow to the bottom and right sides of the box using the following CSS with your target HTML element:

Output:

9. Add a Thin, Colored Border Shadow to All Sides

You can add a simple colored border shadow to all sides of the box using the following box-shadow CSS with your target HTML element:

Output:

10. Add Multiple Colored Border Shadows to the Bottom and Left Sides of the Box

You can add multiple colored border shadows to the bottom and left sides of the box using the following CSS with your target HTML element:

Output:

11. Add Multiple Colored Border Shadows to the Bottom

You can add multiple colored border shadows to the bottom of the box using the following box-shadow CSS with your target HTML element:

Output:

12. Add Multiple Colored Border Shadows to the Bottom and Right Sides of the Box

You can add multiple colored border shadows to the bottom and right sides of the box using the following CSS with your target HTML element:

Output:

13. Add Light Shadows to the Left and Right Sides, Spread Shadow to the Bottom

You can add light shadows to the left and right sides and spread shadow to the bottom of the box using the following box-shadow CSS with your target HTML element:

Output:

Integrate CSS With an HTML Page

Now you know how to add cool box-shadow effects using CSS, you can easily integrate them with HTML elements in multiple ways.

You can embed it in the HTML page itself or attach it as a separate document. There are three ways to include CSS in an HTML document:

Internal CSS

Embedded or Internal Style Sheets are inserted within thesection of an HTML document using the