How to design GLASSMORPHISM CARD in HTML AND CSS

Step 1)Add html

<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Glass Morphism</title>

</head>

<body>

    <div class="card">

        <h1>Glass</h1>

        <h1>Morphism</h1>

        <p>

            Lorem ipsum dolor sit amet consectetur adipisicing elit.

            Eum excepturi minima vero maiores? Repudiandae autem

            asperiores alias molestias earum, possimus eum id,

            totam vitae obcaecati dicta eveniet labore animi laudantium.

        </p>

        <a href="#">READ MORE</a>

    </div>

</body>

</html>

Step 2) Add Css

<style>

    *{

        box-sizing: border-box;

        margin: 0;

        padding: 0;

    }

    body{

        height: 100vh;

        width: 100vw;

        background: linear-gradient(45deg, red, orange);

    }

    .card{

        position: relative;

        margin: 150px auto;

        width: 450px;

        padding: 30px;

        border: 1px solid rgba(255, 255, 255, 0.8);

        border-radius: 20px;

        background: rgba(255, 255, 255, 0.3);

        backdrop-filter: blur(20px);

        color : #fff;

        font-family: 'Poppins', sans-serif;

        box-shadow: -4px 14px 20px rgba(255, 255, 255, 0.2);         

    }

    h1{

        line-height: 40px;

        font-size: 45px;

        text-shadow: 1px 3px 6px #777;

    }

    p{

        position: relative;

        margin: 20px auto;

        text-shadow: 0 1px 3px #555;

    }

    a{

        color: #fff;

        text-decoration: none;

        padding: 5px;

        border: 2px solid #fff;

        border-radius: 10px;

    }

    a:hover{

        background: rgba(255, 255, 255, 0.2);

    }

    

</style>

Watch Tutorial on Youtube channel

Tags :- glass morphism css code glassmorphism css example glassmorphism css card glass morphism effect css glassmorphism css code glassmorphism in css glassmorphism ui css