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