Open In App

How to Create Floating Box Effect using HTML and CSS ?

Improve
Improve
Like Article
Like
Save
Share
Report

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.

HTML




<!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. 

CSS




<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. 

HTML




<!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: 

 



Last Updated : 14 Sep, 2021
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads