Web design is all about making engaging and visually appealing interfaces. One way to achieve this is through the use of modern design trends like glassmorphism and glowing effects. In this guide, we’ll walk through how to create a stunning glowing gradient glassmorphism card effect using HTML and CSS. This effect can be used to highlight content, make interactive elements stand out, and give your site a contemporary feel.
Overview of the Design of glowing gradient glassmorphism card.
The design we’ll be implementing features a series of cards with a glassmorphism effect—a style characterized by semi-transparent backgrounds and blurred elements—combined with a glowing gradient effect that animates when hovered over. This combination of effects creates a visually striking and modern user interface.
HTML Structure
Let’s start by reviewing the HTML structure of our design. Here’s a breakdown of the markup:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Glowing Gradient Glassmorphism Card</title>
</head>
<body>
<div class="container">
<div class="box">
<span></span>
<div class="content">
<h2>Card one</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>Card two</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
<div class="box">
<span></span>
<div class="content">
<h2>Card Three</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
<a href="#">Read More</a>
</div>
</div>
</div>
</body>
</html>
In this HTML, we have a container div holding three box elements. Each box contains a span for the glowing effect and a content div for the card details.
CSS Styling
Now, let’s dive into the CSS. This is where the magic happens, as we combine glassmorphism with glowing gradients and animations.
Resetting Defaults
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: consolas;
}
This resets default browser styling to ensure consistency across different platforms and sets a monospace font for the entire page.
Body and Container
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1d061a;
}
.container {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: wrap;
padding: 40px 0;
}
The body is styled to center the container both vertically and horizontally, with a dark background to enhance the glow effect. The container is set up to center its child elements and wrap them as needed.
Card Styling
.container .box {
position: relative;
width: 320px;
height: 400px;
display: flex;
justify-content: center;
align-items: center;
margin: 40px 30px;
transition: 0.5s;
}
Each .box is positioned relatively with dimensions of 320px by 400px. It uses flexbox to center its content and has a margin for spacing between cards. The transition property is used to animate changes.
Glassmorphism Effect
.container .box::before,
.container .box::after {
content: '';
position: absolute;
top: 0;
left: 50px;
width: 50%;
height: 100%;
background: #fff;
border-radius: 8px;
transform: skewX(15deg);
transition: 0.5s;
}
.container .box::after {
filter: blur(30px);
}
The ::before and ::after pseudo-elements are used to create the glassmorphism effect. They are positioned absolutely to cover the entire box with a semi-transparent, blurred background. The transform property skews the elements to add a dynamic angle.
Hover Effects
.container .box:hover::before,
.container .box:hover::after {
transform: skewX(0deg);
left: 20px;
width: calc(100% - 90px);
}
When the user hovers over a card, the skew is removed and the elements adjust their position and width to create a more pronounced effect.
Gradient Backgrounds
.container .box:nth-child(1)::before,
.container .box:nth-child(1)::after {
background: linear-gradient(315deg, #ffbc00, #ff0058);
}
.container .box:nth-child(2)::before,
.container .box:nth-child(2)::after {
background: linear-gradient(315deg, #03a9f4, #ff0058);
}
.container .box:nth-child(3)::before,
.container .box:nth-child(3)::after {
background: linear-gradient(315deg, #4dff03, #00d0ff);
}
Each card has a unique gradient background applied through the ::before and ::after pseudo-elements. This gradient adds color and visual interest to the glassmorphism effect.
Glowing Animation
.container .box span::before,
.container .box span::after {
content: '';
position: absolute;
border-radius: 8px;
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
opacity: 0;
transition: 0.1s;
animation: animate 2s ease-in-out infinite;
box-shadow: 0 5px 15px rgba(0,0,0,0.08);
}
.container .box:hover span::before {
top: -50px;
left: 50px;
width: 100px;
height: 100px;
opacity: 1;
}
.container .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);
}
}
The span::before and span::after pseudo-elements create animated glowing circles that appear when the user hovers over the card. The @keyframes animate rule defines the movement of these circles to enhance the glowing effect.
Content Styling
.container .box .content {
position: relative;
padding: 20px 40px;
background: rgba(255, 255, 255, 0.05);
backdrop-filter: blur(10px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
border-radius: 8px;
z-index: 1;
color: #fff;
transition: 0.5s;
}
.container .box:hover .content {
left: -25px;
padding: 60px 40px;
}
The content inside each box has a semi-transparent background, a blur effect, and a subtle shadow to create the glassmorphism look. On hover, the content shifts slightly and enlarges to emphasize the interaction.
Conclusion
By combining glassmorphism with glowing gradient effects, you can create visually stunning and interactive card designs that stand out on any webpage. This effect not only enhances the aesthetic appeal but also makes the user interface more engaging.
Feel free to experiment with different gradients, blur levels, and animation timings to customize the effect to fit your specific design needs. Share your results or ask any questions you may have in the comments below!
