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:
xxxxxxxxxx
1
.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.
xxxxxxxxxx
1
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>