How to Create Floating Box Effect using HTML and CSS ?

Last Updated : 12 Jul, 2025

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:

How to create Image Folding Effect using HTML and CSS?

sirohimukul1999

Improve

Article Tags :

How to Create Floating Box Effect using HTML and CSS ?

Similar Reads

Thank You!

What kind of Experience do you want to share?