EN
CSS - box-shadow effect on top and bottom only
0
points
In this article, we would like to show you how to add box-shadow effect at the top and bottom only using CSS.
Quick solution:
.element {
box-shadow: 0px 5px 5px gray, 0px -5px 5px gray; /* box-shadow: top-style, bottom-style; */
}
Practical example
In this example, we insert two styles into the box-shadow property.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
.element {
margin-top: 20px;
box-shadow: 0px 5px 5px gray, 0px -5px 5px gray; /* <----- required */
}
</style>
</head>
<body>
<div class="element">
some text here...
</div>
</body>
</html>
Note:
This solution is just a combination of two styles that you can find in the following articles: