How to usethe box-shadow Property in CSS

Q: How to usethe box-shadow Property in CSS

The box-shadow the property allows you to add a drop shadow effect to an element. It takes in multiple values that define the properties of the shadow.

Approach 2: Using Pseudo-elements

The box-shadow the property allows you to add a drop shadow effect to an element. It takes in multiple values that define the properties of the shadow.

Syntax:

selector {
  box-shadow: [horizontal offset] [vertical offset] [blur radius] [spread radius] [color];
}

Example: In this example, we are using the above-explained property.

HTML

<!DOCTYPE html> 
<html> 
  
<head> 
    <title>Drop Shadow Effect using CSS</title> 
    <style> 
        .box { 
            width: 200px; 
            height: 200px; 
            background-color: green; 
            box-shadow: 4px 4px 4px rgba(0, 0, 0, 0.9); 
        } 
    </style> 
</head> 
  
<body> 
    <h1 style="color: green;"> 
        w3wiki 
    </h1> 
    <div class="box"></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