Skip to content

CSS Glowing Gradient Glassmorphism Card Hover Effect

CSS Glowing Gradient Glassmorphism Card Hover Effect

CSS Glowing Gradient Glassmorphism Card Hover Effect

Hi everyone,

Today we are going to learn how to CSS Glowing Gradient Glassmorphism Card Hover Effect Using Pure HTML and CSS only.  In our tutorial, you will learn how to create beautiful card hover effects without javascript. This card design is created using pure CSS. We don’t use any javascript code or library to make this amazing glassmorphism card hover effect. So for that, we need two files to implement our design.

[embedyt] https://www.youtube.com/watch?v=9HMYvr-OzNo [/embedyt]

First, Create an index.html and copy the below code:

 

<!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>CSS Glowing Gradient Glassmorphism Card Hover Effect</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <div class="cws_container">
        <div class="cws_box">
            <span></span>
            <div class="cws_content">
                <h2>Card One</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sed eveniet, minus dolorem a labore!</p>
                <a href="#">Read More</a>
            </div>
        </div>

        <div class="cws_box">
            <span></span>
            <div class="cws_content">
                <h2>Card Two</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sed eveniet, minus dolorem a labore!</p>
                <a href="#">Read More</a>
            </div>
        </div>

        <div class="cws_box">
            <span></span>
            <div class="cws_content">
                <h2>Card Three</h2>
                <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Unde sed eveniet, minus dolorem a labore!</p>
                <a href="#">Read More</a>
            </div>
        </div>
    </div>
    
</body>
</html>

After that create a Style.css file and copy the below code and paste it inside your style.css file.

 

*{
    margin:0;
    padding:0;
    box-sizing: border-box;
    font-family: consolas;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    background-color: #170715;
}
.cws_container{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    padding: 40px 0;
}
.cws_container .cws_box{
    position: relative;
    width:320px;
    height: 400px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 40px 30px;
    transition: 0.5s;
}

.cws_container .cws_box::before{
 content: '';
 position: absolute;
 top: 0;
 left: 50px;
 width: 50%;
 height: 100%;
 text-decoration: none;
 background-color: #fff;
 border-radius: 8px;
 transition: 0.5s;
 transform: skewX(15deg);
}
.cws_container .cws_box::after{
    content: '';
    position: absolute;
    top: 0;
    left: 50px;
    width: 50%;
    height: 100%;
    text-decoration: none;
    background-color: #fff;
    border-radius: 8px;
    transform: skewX(15deg);
    transition: 0.5s;
    filter: blur(30px);
}
.cws_container .cws_box:hover:before,
.cws_container .cws_box:hover:after{
    transform: skewX(0deg);
    left: 20px;
    width: calc(100% - 90px);
}
.cws_container .cws_box:nth-child(1):before,
.cws_container .cws_box:nth-child(1):after{
    background:linear-gradient(315deg, #ffbc00, #ff0058);
}

.cws_container .cws_box:nth-child(2):before,
.cws_container .cws_box:nth-child(2):after{
    background:linear-gradient(315deg, #03a9f4, #ff0058);
}

.cws_container .cws_box:nth-child(3):before,
.cws_container .cws_box:nth-child(3):after{
    background:linear-gradient(315deg, #4dff03, #00d0ff);
}

.cws_container .cws_box span{
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 5;
    pointer-events: none;
}
.cws_container .cws_box span::before{
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 0;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.1s;
    animation: aniamte 2s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.cws_container .cws_box:hover span::before{
    top: -50px;
    left:50px;
    width: 100px;
    height: 100px;
    opacity: 1;
}

.cws_container .cws_box span::after{
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    border-radius: 8px;
    background: rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: 0.5s;
    animation: aniamte 2s ease-in-out infinite;
    box-shadow: 0 5px 15px rgba(0,0,0,0.08);
    animation-delay: -1s;;
}

.cws_container .cws_box:hover span::after{
    bottom: -50px;
    right:50px;
    width: 100px;
    height: 100px;
    opacity: 1;
}
@keyframes animate {
    0%, 100%{
        transform: translateY(10px);
    }
    50%{
        transform: translate(-10px);
    }
}

.cws_container .cws_box .cws_content{
    position: relative;
    left: 0;
    padding: 20px 40px;;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    border-radius: 8px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.1);
    z-index: 1;
    transition:0.5s;
    color: #fff;
}
.cws_container .cws_box:hover .cws_content{
    left: -25px;
    padding: 60px 40px;
}
.cws_container .cws_box .cws_content h2{
    font-size: 2em;
    color: #fff;
    line-height: 1.4em;
}

.cws_container .cws_box .cws_content p{
    font-size: 1.1em;
    margin-bottom: 10px;
    line-height: 1.4em;
}
.cws_container .cws_box .cws_content a{
   
    display: inline-block;
    font-size: 1.1em;
    color: #111;
    background-color: #fff;
    padding: 10px;
    border-radius: 4px;
    text-decoration: none;
    font-weight: 700;
    margin-top: 5px;
}
.cws_container .cws_box .cws_content a:hover{
    background-color: #ffcf4d;
    border: 1px solid rgba(255, 0, 88, 0.4);
    box-shadow: 0 1px 15px rgba(1, 1, 1, 0.2);
}

Full Source Code Download: CSS Glowing Gradient Glassmorphism Card Hover Effect

 

Watch Other Tutorials

CSS Isometric Menu Hover Effects

Amazing CSS 3D Menu Hover Effect

 

Leave a Reply

Your email address will not be published. Required fields are marked *


Ads Blocker Image Powered by Code Help Pro

Ads Blocker Detected!!!

We have detected that you are using extensions to block ads. Please support us by disabling these ads blocker.