EN
CSS - box-shadow effect at the top only
0
points
In this article, we would like to show you how to add box-shadow effect at the top only using CSS.
Quick solution:
.element {
box-shadow: 0px -5px 5px gray; /* box-shadow: offset-x offset-y blur-radius color; */
}
Practical example
In this example, we use box-shadow with three values offset-x, offset-y and blur-radius to create shadow effect at the top of .element class.
// ONLINE-RUNNER:browser;
<!DOCTYPE html>
<html>
<head>
<style>
.element {
margin-top: 20px;
box-shadow: 0px -5px 5px gray; /* <----- required */
}
</style>
</head>
<body>
<div class="element">
some text here...
</div>
</body>
</html>