How to usePseudo-elements in CSS
In this approach we are using::after pseudo-element, we may create an overlaying pseudo-element with a background color to simulate a shadow behind the primary element.
Syntax:
.element {
position: relative;
}
.element::after {
content: "";
position: absolute;
/* Define shadow styles, e.g.,
background-color, offset, blur, etc. */
}
Example: Drop Shadow Effect using Pseudo-elements.
HTML
<!DOCTYPE html> <html> <head> <title>Drop Shadow - ::after Pseudo-element </title> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .container { position: relative; } .box-with-shadow { width: 200px; height: 200px; background-color: green; border-radius: 8px; } .box-with-shadow::after { content: ""; position: absolute; top: 8px; left: 8px; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.4); z-index: -1; border-radius: 8px; } </style> </head> <body> <div class="container"> <div class="box-with-shadow"> Drop Shadow using ::after </div> </div> </body> </html> |
Output:
How to create a drop shadow effect using CSS ?
In this article, we are going to learn how to create a drop shadow effect using CSS. drop-shadow() is an inbuilt function used to create a blurred shadow in a given offset and color. A drop shadow effect adds depth and visual interest to elements on a web page by creating a shadow behind them. This effect can be achieved using various CSS properties, By adjusting the values of these properties, you can control the size, color, blur, and position of the shadow, giving your elements a more prominent and three-dimensional appearance.
There are several approaches that can be used to create a drop shadow effect using CSS
- Using the box-shadow property
- Using Pseudo-elements
- using filter property with drop-shadow function
- using inset box-shadow
We will explore all the above methods along with their basic implementation with the help of examples.
Contact Us