3D Glassmorphism Web Design Using HTML and CSS | Glass morphism UI Design using Vanilla Tilt.js

Learn How To Make 3D Glassmorphism Web Design Using HTML and CSS | Glass morphism UI Design using Vanilla Tilt.js Tutorial for beginners step by step.

In this video, we will create a user profile card UI design with glassmorphism style and tilt effect. This profile card background will be partially transparent like glass and the background behind the card will look blurred which we will create using CSS. We will also add a tilt effect to this website design. When we will move the cursor over the card then the card will be tilted.

Step 1: First of all you need to create a folder on your computer then create a file called index.html where you are going to code your HTML. Download images!

<!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">
    <link rel="stylesheet" href="style.css">
    <title>Glassmorphism 3D Animation</title>
</head>
<body>
    <div class="container">
        <div class="card" data-tilt>
            <img src="profile.png" alt="profile">
            <h2>Nasimul Haque</h2>
            <p>I'm a Junior Web Developer since 2019 and I love to 
            learn coding!</p>
            <div class="social">
                <a href="#"><img src="facebook.png" alt=""></a>
                <a href="#"><img src="twitter.png" alt=""></a>
                <a href="#"><img src="telegram.png" alt=""></a>
            </div>
            <a href="#" class="btn">Contact me</a>
        </div>
    </div>

    <script src="vanilla-tilt.js"></script>
    
</body>
</html>

Open your index.html file on your Visual Studio Code Copy the HTML code and paste it to your editor and save it by using the keyboard shortcut CTRL+S.

Sidebar Menu using HTML, CSS & JavaScript | How To Create Side Navigation Menu?

Step 2: Now go to your folder again and create a new file called style.css where you are going to code your CSS (Cascading Style Sheet) code.

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}

.container {
    width: 100%;
    height: 100vh;
    background-image: url(background.png);
    background-position: center;
    background-size: cover;
    display: flex;
    justify-content: center;
    align-items: center;
}

.card {
    width: 90%;
    max-width: 440px;
    color: #fff;
    text-align: center;
    padding: 50px 35px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    box-shadow: 0 4px 30px rgba(255, 255, 255, 0.35);
    backdrop-filter: blur(5px);
    cursor: pointer;
}

.card img {
    width: 170px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
}

.card h2 {
    font-size: 35px;
    font-weight: 500;
    margin-top: 20px;
}

.card p {
    font-size: 18px;
    margin: 10px auto;
    max-width: 330px;
    opacity: .8;
    line-height: 1.5em;
}

.card .social img {
    width: 40px;
    border-radius: 50%;
    margin: 10px 5px;
    transition: .5s;
    border: none;
}

.card .social img:hover {
    background: #ff01ff;
}

.btn {
    text-decoration: none;
    display: inline-block;
    font-size: 19px;
    font-weight: 500;
    background: transparent;
    color: #fff;
    padding: 10px 30px;
    margin: 30px 0 10px;
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 30px;
    transition: all .4s ease-in-out;
}

.btn:hover {
    background: #ff01ff;
}

After that open it on your Visual Studio Code Copy the CSS code and paste it to your editor then save it by using the keyboard shortcut CTRL+S.

Step 3: Now you are ready to test the code. Go to your folder again and open your index.html file with Google Chrome Browser.

If you get any error in your code and you are just stuck on it then please go to our Facebook Group and create a post with a screenshot and problem details.

Stay connected with us on Youtube and Facebook

Happy Learning!

Free Email Automation

Ticker

3D Glassmorphism Web Design Using HTML and CSS | Glass morphism UI Design using Vanilla Tilt.js