How to create Box Shadow with CSS-With Syntax

How Box shadow works

0

Many beginners ask me what is the way to create Box Shadow using CSS. So, here I am providing step by step guide on how to do it easily.

Let’s take a live example.

<!DOCTYPE html>
<html>
<head>
<style>
div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px;
}
</style>
</head>
<body>

<h1>The box-shadow Property</h1>

<div>This is a div element with a box-shadow</div>

</body>
</html>

The result will look like this

This is the simplest way to use a Box Shadow.

However, in the “box-shadow” property of the above code, the first property represents the pixel of shadow horizontally while the second value represents the vertical measure.

Let’s go a step further with another example.

div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 10px red;
}

Finally, the result will look like this

You may have noticed the change of the shadow color and also a blur effect on the shadow. And I hope you’ve already got the trick.

Yes, the third value of the  “box-shadow” property determines the blur effect of the shadow and lastly, I have mentioned the color of the shadow.

Tips: However, the value can be negative as well. When you put a negative value, you get the same opposite result. Furthermore, you can also use multiple Shadow in a single Box.

Let’s see another example:

div {
width: 300px;
height: 100px;
padding: 15px;
background-color: yellow;
box-shadow: 10px 10px 5px red, -10px -10px 5px blue;
}

Here goes the result

Stntax

/* offset-x | offset-y | color */

box-shadow: 60px -16px teal;

/* offset-x | offset-y | blur-radius | color */

box-shadow: 10px 5px 5px black;

/* offset-x | offset-y | blur-radius | spread-radius | color */

box-shadow: 2px 2px 2px 1px rgba(0, 0, 0, 0.2);

/* inset | offset-x | offset-y | color */

box-shadow: inset 5em 1em gold;

/* Any number of shadows, separated by commas */

box-shadow: 3px 3px red, -1em 0 0.4em olive;

/* Global keywords */

box-shadow: inherit;

box-shadow: initial;

box-shadow: unset;

We hope this article helped you learn how to create Box Shadow using  CSS. You may also want to check out our guide on How To Create Checkbox and Radio buttons in HTML/CSS.

If you liked this article, then please subscribe to our YouTube Channel for video tutorials. You can also find us on Facebook.

Leave A Reply

Your email address will not be published.