CSS box-shadow
All About EffectsIn this lesson, we will learn how to apply box shadow to an HTML element using CSS box-shadow property.
CSS box-shadow Property
The CSS box-shadow property allows you to add shadows to HTML elements, creating a sense of depth and separation between elements on your webpage.
The syntax for the box-shadow property is as follows:
box-shadow: x-offset y-offset blur spread color inset;- x-offset: The x-offset value move the shadow right, while negative value move it left.
- y-offset: The y-offset value move the shadow down, while negative values move it up.
- blur: Specifies the blur radius of the shadow. A higher value results in a more diffuse shadow.
- spread: Defines the size of the shadow. A positive value increases the size, while a negative value decreases it. The default value is 0.
- color: Sets the color of the shadow.
- inset: This is an optional value, If included, the shadow becomes an inner shadow.
Basic Shadow
Let's create a basic shadow of a div element. Suppose you have a box with the following CSS:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Basic Shadow Example</title>
<!-- Internal CSS -->
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 10px 10px 10px 2px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>In the example above, the box will have a shadow that is 10 pixels to the right and 10 pixels down, with a blur radius of 20 pixels, a spread value of 2px and the color is a shade of gray (#888888).
Inset Shadow
Adding the inset keyword creates an inner shadow. See the example below.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Inset Shadow Example</title>
<!-- Internal CSS -->
<style>
.box {
width: 200px;
height: 200px;
background-color: #3498db;
box-shadow: 5px 5px 10px 2px #2B2B2B inset;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>Multiple Shadows
You can also apply multiple shadows to an element. Here's an example:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Multiple Shadows Example</title>
<!-- Internal CSS -->
<style>
.box {
width: 200px;
height: 200px;
position: relative;
left: 50px;
top: 20px;
background-color: #3498db;
box-shadow: 10px 10px 10px 2px #888888, -10px -10px 10px 2px #888888;
}
</style>
</head>
<body>
<div class="box"></div>
</body>
</html>This code will create both a shadow on the bottom right and a shadow on the top left of the box.
