CSS box-shadow property adds a shadow effect to an HTML element. It allows you to create a shadow behind an element, which can give the element depth and make it stand out on the page. In this article, we will see the Box Shadow Bottom Only in CSS. For this, we will implement 2 different approaches:
- Using the box-shadow property
- Using the ::after pseudo-element with the box-shadow property
We will explore both these approaches in detail, along with understanding their basic implementation through the examples.
Approach 1: Using the CSS box-shadow property.
Syntax:
box-shadow: h-shadow v-shadow blur spread color inset;
Property Values:
- h-shadow: The horizontal offset of the shadow. Positive values move the shadow to the right, while negative values move it to the left.
- v-shadow: The vertical offset of the shadow. Positive values move the shadow down, while negative values move it up.
- blur: The blur radius of the shadow. A larger value will create a more blurred shadow.
- spread: The spread radius of the shadow. Positive values will expand the shadow, while negative values will contract it.
- color: The color of the shadow.
- inset: Optional. If specified, the shadow will be inset, which means it will appear inside the element instead of outside.
Example 1: This will create a shadow effect only at the bottom of the element with a color black and a slight blur.
<!DOCTYPE html> <html>
<head>
<title>Box Shadow Bottom Only</title>
<style>
h1 {
color: green;
font-size: 48px;
}
.container {
text-align: center;
}
button {
font-size: 22px;
padding: 8px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
border: 1px solid transparent;
box-shadow: 0 4px 2px -2px rgba(0, 0, 0, 0.2);
}
button:hover {
color: black;
background-color: rgb(131, 255, 131);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<button>Click me!</button>
</div>
</body>
</html>
|
Output:
Approach 2: Using the::after pseudo-element with a CSS box-shadow property.
Syntax:
button::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.3);
z-index: -1;
}Example 2: In this example, we have used the ::after pseudo-element, along with using the box-shadow property to create the Box Shadow at the bottom of the box only.
<!DOCTYPE html> <html>
<head>
<title>Box Shadow Bottom Only</title>
<style>
h1 {
color: green;
font-size: 48px;
}
.container {
text-align: center;
}
button {
font-size: 22px;
padding: 8px;
color: rgb(0, 0, 0);
background-color: rgb(255, 255, 255);
border: 1px solid transparent;
position: relative;
}
button::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 5px;
background: transparent;
box-shadow: 0 0 6px 3px rgba(0, 0, 0, 0.3);
z-index: -1;
}
button:hover {
color: black;
background-color: rgb(131, 255, 131);
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>GeeksforGeeks</h1>
<button>Click me!</button>
</div>
</body>
</html>
|
Output: