How to Create Floating Box Effect using HTML and CSS ? - GeeksforGeeks

14 Sep, 2021
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: 
 
Attention reader! Don’t stop learning now. Get hold of all the important HTML concepts with the Web Design for Beginners | HTML  course.
sagartomar9927
CSS-Misc
HTML-Misc
CSS
HTML
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Design a web page using HTML and CSS
How to set space between the flexbox ?
Form validation using jQuery
Search Bar using HTML, CSS and JavaScript
How to style a checkbox using CSS?
How to set the default value for an HTML <select> element ?
Hide or show elements in HTML using display property
How to set input type date in dd-mm-yyyy format using HTML ?
REST API (Introduction)
How to Insert Form Data into Database using PHP ?