How to create a drop shadow effect using CSS ?
Last Updated :
18 Sep, 2023
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.
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;">
GeeksforGeeks
</h1>
<div class="box"></div>
</body>
</html>
Output:
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:
.png)
Approach 3: using filter property with drop-shadow function
The drop shadow effect using the filter property and drop-shadow function applies a shadow to an element using CSS filter, enhancing visual appearance.
Syntax:
.element {
/* Other styles for the element */
filter: drop-shadow([offset-x] [offset-y] [blur-radius] [color]);
}Example: In this example, we are using filter property with the drop-shadow function.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Drop Shadow -using Filter property</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.drop-shadow {
width: 200px;
height: 200px;
background-color: green;
border-radius: 4px;
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.8));
}
</style>
</head>
<body>
<div class="drop-shadow">
</div>
</body>
</html>
Output:
.png)
Approach 4: using inset box-shadow
In this approach we are using the CSS box-shadow property and the inset keyword, the inset box-shadow provides a shadow effect inside the element to give it a recessed appearance.
Syntax
.element {
/* Other styles for the element */
box-shadow: inset [offset-x] [offset-y] [blur-radius] [spread-radius] [color];
}Example: In this example, we are using the inset box-shadow property.
HTML
<!DOCTYPE html>
<html>
<head>
<title>Drop Shadow - Inset Box Shadow </title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.inset-box-shadow {
width: 400px;
height: 300px;
background-color: white;
border-radius: 6px;
box-shadow: inset 4px 4px 8px rgba(0, 0, 0, 0.8);
}
</style>
</head>
<body>
<div class="inset-box-shadow">
Drop Shadow using inset box-shadow
</div>
</body>
</html>
Output:
.png)
Similar Reads
How to Create a Gradient Shadow using CSS ?
A gradient shadow in CSS refers to creating a shadow effect that transitions smoothly from one color to another, using gradients. While the box-shadow property doesn't support gradients directly, you can simulate this effect by layering a semi-transparent gradient as the background or using pseudo-e
2 min read
How to create a marquee effect using CSS ?
In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti
2 min read
How to Create Paradoxical Effect using CSS ?
Paradoxical effect is the effect where the divs or the elements are placed in circular form top of each other. This type of effect is useful when you want to design a circular button that opens up when you hover and each button assigns some task and place like the top of each other. In the below exa
2 min read
How to create icon hover effect using CSS ?
To style an icon's color, size, and shadow using CSS, use the color property to set the icon's color, font size to adjust its size, and text-shadow or box-shadow for adding shadow effects, creating a visually appealing and dynamic look.Using: hover Pseudo-ClassUsing the: hover pseudo-class, you can
2 min read
How To Create Carved Text Effect using CSS?
The carved text effect is also known as the embossed effect as it looks like the text has been embossed on a background. It is also known as Neumorphism in CSS. This effect is used when we want to give our website a clean and refreshing look. The embedded text can be of the same color as the backgro
2 min read
How To Create A Dropup Menu Using CSS?
A Dropup menu is a type of menu in web design that expands upwards from its trigger element instead of the traditional dropdown direction. Dropup menus are often used in contexts such as navigation bars, form selections, and interactive elements.Below are the approaches used for creating the dropup
6 min read
Create a Drop Caps Effect using CSS
Drop caps are defined as the first capital letter of a paragraph in a much larger font size that has the depth of two or more lines of normal text. The task can be done by using the CSS ::first-letter pseudo-element to create a beautiful drop caps effect. The ::first-letter selector in CSS is used
2 min read
How to Create Different Overlay Effects using CSS?
Overlay effects are a powerful way to enhance the visual appeal and user experience of a website. With CSS, creating various overlay effects can be achieved relatively easily, offering designers a plethora of creative possibilities. Below are the approaches to create different overlay effects using
3 min read
How to create Neumorphism Effect using HTML and CSS ?
Neumorphism (neomorphism) is a modern way of styling web-elements of any web-page and providing a 3D effect. This animation effect can be easily generated by using HTML and CSS. Box-shadow property of CSS can be used to implemented Neumorphism. It is used to add a dark shadow to one side and a light
2 min read
How to create reflection effect using HTML and CSS ?
The reflection effect is one of the coolest effects that one can use in his/her website. It is a type of informal effect so it is highly recommended not to use it any professional project. You can use it in your personal projects and maybe your portfolio to show your creativity. In this effect, we t
3 min read