How to Create Floating Box Effect using HTML and CSS ?
The floating box effect is a classical example of a custom box-shadow technique. In this technique, we create realistic-looking shadows without using the box-shadow property that is provided by the CSS.
Approach: The approach is to use after selector to use create shadow using the blur function.
HTML Code: In this section, we have created the basic structure of the body. Here, we have used a <div> tag containing class attribute to render the floating box on the screen.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width,
initial-scale=1.0">
<title>Floating Box</title>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="geeks"></div>
</body>
</html>
CSS Code: In this section, we have used some CSS property to design floating box and assign some styles on them. The following steps describe the CSS properties:
- Step 1: First we have done some basic styling like providing a background, creating a box, and aligning everything to the center of the page.
- Step 2: Now, use the after selector to create a thin line below the box that we have created and then use blur function to give it the shadow effect.
Tip: Try use a darker color and a low value for blur function for shadow. If not, you might end up making your shadow transparent.
<style>
body {
background: green;
}
h1 {
display: flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width: 400px;
height: 250px;
background: white;
position: absolute;
top: 16%;
left: 35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height: 4px;
left: 3%;
border-radius: 50%;
filter: blur(3px);
}
</style>
Complete Code: It is the combination of the above two codes.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content=
"width=device-width,initial-scale=1.0">
<title>Floating Box</title>
<style>
body {
background: green;
}
h1 {
display:flex;
justify-content: center;
color: white;
font-size: 40px;
}
.geeks {
width:400px;
height:250px;
background: white;
position: absolute;
top:16%;
left:35%;
border-radius: 20px;
}
.geeks::after {
content: "";
position: absolute;
bottom: -30px;
background: rgb(43, 42, 42);
width: 90%;
height:4px;
left:3%;
border-radius:50%;
filter: blur(3px);
}
</style>
</head>
<body>
<h1>GeeksForGeeks</h1>
<div class="geeks"></div>
</body>
</html>
Output:
