EN
CSS - box-shadow effect on bottom only
0 points
In this article, we would like to show you how to add box-shadow effect at the bottom only using CSS.
Quick solution:
xxxxxxxxxx1
.element {2
box-shadow: 0px 5px 5px gray; /* box-shadow: offset-x offset-y blur-radius color; */3
}
In this example, we use box-shadow with three values offset-x, offset-y and blur-radius to create shadow effect at the bottom of .element class.
xxxxxxxxxx1
2
<html>3
<head>4
<style>5
6
.element {7
margin-top: 20px;8
box-shadow: 0px 5px 5px gray; /* <----- required */9
}10
11
</style>12
</head>13
<body>14
<div class="element">15
some text here...16
</div>17
</body>18
</html>
