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.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


CSS Code: In this section, we have used some CSS property to design floating box and assing 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.



filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Complete Code: It is the combination of the above two codes.

filter_none

edit
close

play_arrow

link
brightness_4
code

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

chevron_right


Output:

full-stack-img




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.