We will understand the CSS box shadow bottom only in this article.
CSS Box-shadow
The "box-shadow" is the CSS property that is utilized to add the shadow to the HTML element.
Syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
The values that the box-shadow property takes are described below:
- H-shadow: It represents the horizontal offset of the box shadow. It can be both negative and positive values. If it is a positive value, then the shadow is created towards the right, and if it is a negative value, then the shadow is created towards the left.
- V-shadow: It represents the vertical offset of the box shadow. It can have both negative and positive values. If it is a positive value, the shadow is created downwards, and if it is a negative value, it is created upwards.
- Blur: It represents the blur radius of the box shadow. If the value is large, the blurred shadow will be greater, and if the value is small, the blurred shadow will be less.
- Spread: It represents the spread radius of the box shadow. It can be both negative and positive values. If it is a positive value, then the box shadow will expand, and if it is a negative value, then the box shadow will contract.
- Color: It represents the color of the box shadow.
- Inset: It makes the box shadow appear inside the HTML element.
Illustrations of the CSS Box-shadow Bottom Only
Let's understand the CSS box shadow specifically at the bottom through visual representations.
Illustration 1:
We are going to generate a shadow underneath the <div> component by making use of the CSS box-shadow feature. The shadow will be crafted both externally and internally at the lower section of the element. By specifying h-shadow, v-shadow, blur, spread, and color values within the CSS box-shadow property, we can produce the exterior shadow at the bottom of the element.
We will specify the inset value along with h-shadow, v-shadow, blur, spread, and color values within the CSS box-shadow property to generate a shadow on the inner bottom side of the element.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS box-shadow bottom only property</title>
<style>
div {
font-family: 'Courier New', Courier, monospace;
font-size: 25px;
text-align: center;
color: rgb(70, 8, 8);
padding: 24px;
font-weight: bold;
}
.box-shadow1 {
width: 500px;
height: 150px;
background-color: rgb(243, 167, 154);
box-shadow: 0px 10px 8px -6px red;
}
.box-shadow2 {
width: 500px;
height: 150px;
background-color: rgb(243, 167, 154);
box-shadow: 0 -15px 10px -10px red inset;
}
</style>
</head>
<body>
<div class="box-shadow1">
<p>Box-1 <br> CSS box-shadow bottom only:
shadow is outside the element.
</p>
</div> <br> <br>
<div class="box-shadow2">
<p>Box-2 <br> CSS box-shadow bottom only:
shadow is inside the element.
</p>
</div>
</body>
</html>
Output:
Here is the result where a shadow is visible underneath the HTML components. The shadow is observed on the exterior of box 1 and the interior of box 2.
Illustration 2:
We are going to generate a query form that includes a button, and then apply a shadow effect at the button's bottom using the CSS box-shadow attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>CSS box-shadow at the bottom of the button in the form</title>
<style>
form {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
color: rgb(70, 8, 8);
padding: 24px;
width: 500px;
font-weight: bold;
border: 1px solid teal;
}
.btn {
width: 75px;
height: 32px;
background-color: rgb(160, 243, 185);
border: 1px solid teal;
box-shadow: 0px 15px 15px -9px teal;
}
</style>
</head>
<body>
<form>
<label for="query">Enter your query:</label> <br> <br>
<input type="text" value="Type your query"> <br> <br>
<button class="btn">Send</button>
</form>
</body>
</html>
Output:
Here is the result where we can observe a shadow beneath the button located within the form.
Illustration 3:
We are going to generate a form and apply a shadow at the lower part of the <input> element using the CSS box-shadow attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding a shadow at the bottom of the <input> element in the HTML form</title>
<style>
div {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
color: rgb(9, 17, 104);
padding: 24px;
width: 400px;
height: 550px;
font-size: 18px;
font-weight: bold;
background-color: rgb(199, 191, 191);
border: 1px solid rgb(9, 17, 104);
}
input[type="submit"] {
width: 75px;
height: 30px;
border-radius: 6px;
background-color: rgb(153, 132, 132);
border: 1px solid rgb(84, 61, 61);
}
input[type="text"] {
width: 200px;
height: 21px;
box-shadow: 0px 8px 12px -10px rgb(62, 37, 37);
}
</style>
</head>
<body>
<h3>Student Registration Form</h3>
<div>
<form>
<label for="first-name">First Name:</label> <br> <br>
<input type="text" value="Type your first name"> <br> <br>
<label for="last-name">Last Name:</label> <br> <br>
<input type="text" value="Type your last name"> <br> <br>
<label for="name">Gender:</label> <br> <br>
<input type="radio" name="female" value="female">
<label for="female">Female</label> <br> <br>
<input type="radio" name="male" value="male">
<label for="male">Male</label> <br> <br>
<input type="radio" name="others" value="others">
<label for="others">Others</label> <br> <br>
<label for="age">Age:</label> <br> <br>
<input type="text" value="Type your age"> <br> <br>
<label for="course">Course:</label> <br> <br>
<input type="text" name="course" id="course"> <br> <br>
<input type="submit" value="Submit">
</form>
</div>
</body>
</html>
Output:
Here is the result where a shadow is visible beneath the button located within the form.
Illustration 4:
We are going to generate an animated shadow effect for the element by employing the CSS box-shadow attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Animated box shadow at the bottom of the element (inside and outside)</title>
<style>
div {
font-family: 'Courier New', Courier, monospace;
font-size: 15px;
color: red;
padding: 18px;
width: 500px;
height: 75px;
font-weight: bold;
border: 1px solid yellowgreen;
text-align: center;
background-color: yellow;
}
.box-shadow1 {
box-shadow: 0px 10px 10px -6px red;
animation: animate-box-shadow1 1s infinite alternate;
}
@keyframes animate-box-shadow1 {
to {
box-shadow: 0px 8px 20px -10px rgb(151, 224, 7);
}
}
.box-shadow2 {
box-shadow: 0px -10px 10px -6px red inset;
animation: animate-box-shadow2 1s infinite alternate;
}
@keyframes animate-box-shadow2 {
to {
box-shadow: 0px -8px 20px -10px inset rgb(151, 224, 7);
}
}
</style>
</head>
<body>
<div class="box-shadow1">animated shadow at the bottom only (shadow outside the element)</div> <br> <br>
<div class="box-shadow2">animated box-shadow at the bottom only (shadow inside the element)</div>
</body>
</html>
Output:
Here is the result where we can observe a dynamic shadow cast on both the outer and inner edges at the bottom of the HTML component.
Illustration 5:
In this example, we are going to apply a dual shadow effect to the lower part of the card using the CSS box-shadow attribute. To achieve this, we will specify the shadow value two times within the box-shadow property, resulting in a double shadow effect.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Double shadow at the bottom of the card</title>
<style>
.card {
font-family:'Gill Sans', 'Gill Sans MT', 'Trebuchet MS', sans-serif;
font-size: 36px;
background-color: rgb(180, 233, 233);
color: rgb(2, 2, 77);
padding: 30px;
width: 250px;
height: 350px;
text-align: center;
font-weight: bold;
border: 1px solid rgb(176, 176, 253);
box-shadow: 0px 15px 10px -15px rgb(2, 2, 77), 0px 15px 10px -15px rgb(2, 2, 77);
}
</style>
</head>
<body>
<div class="card">CARD</div>
</body>
</html>
Output:
Here is the result where we can observe a dual shadow effect at the lower part of the card.
Illustration 6:
We are going to generate the navigation bar featuring a shadow at the bottom by employing the CSS box-shadow attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding a shadow at the bottom of the navigation bar</title>
<style>
body {
margin: 0;
font-family: 'Courier New', Courier, monospace;
}
nav{
padding: 10px;
background-color: darkgrey;
display: flex;
font-size: 20px;
color: black;
font-weight: bold;
}
.box-shadow {
box-shadow: 0px 10px 10px -6px black;
}
</style>
</head>
<body>
<nav class="box-shadow">
<ul>
<li href="#">Home</li>
<li href="#">About</li>
<li href="#">Services</li>
<li href="#">Contact</li>
</ul>
</nav>
</body>
</html>
Output:
Here is the result showing the navigation bar with a shadow underneath.
Illustration 7:
We are going to demonstrate adding a shadow below the image using the CSS box-shadow attribute.
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Adding a shadow at the bottom of the image</title>
<style>
body {
font-family: 'Courier New', Courier, monospace;
}
image {
width: 250px;
height: 200px;
}
.box-shadow {
box-shadow: 0px 18px 10px -6px rgb(2, 50, 2);
}
</style>
</head>
<body>
<img src="https://placehold.co/400x300/1abc9c/ffffff?text=Sample+Image" alt="Flower" class="box-shadow">
</body>
</html>
Output:
Here is the result that shows a shadow underneath the image.
Browser Support
Following are the browsers that support the CSS box-shadow property:
- Google Chrome
- Safari
- Firefox
- Opera
- Microsoft Edge
Conclusion
This tutorial clarifies the CSS box shadow bottom exclusive technique. It demonstrates the process of incorporating a shadow specifically at the bottom of the HTML element using the CSS box-shadow attribute.