CSS card glass morphism effect using HTML and CSS

This tutorial blog help you to create Glass Morphism Price Card Hover Effect using CSS

Video tutorial of CSS Card Glassmorphism Effect Using HTML and CSS | Glass Morphism Price Card Hover Effect CSS

This tutorial video can help you to create CSS Card Glassmorphism Effect Using HTML and CSS.

CSS Card Glassmorphism Effect Using HTML and CSS.[Source Codes]

This source code can help you to create CSS Card Glassmorphism Effect Using HTML and CSS.

You can also download this source code through the given link. Click here to download source code

HTML Code

Copy

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=1">
<title>Home</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>

<div class="container">
	<div class="column">
		<div class="card">
			<div class="price">
				<sup>$</sup>19
			</div>
			<h3>Basic</h3>
			<ul>
				<li><span>✔</span> Single Page Template</li>
				<li><span>✔</span> 100% Responsive</li>
				<li><span>✔</span> W3C Validated</li>
				<li><span>✔</span> Well Commented Code</li>
				<li><span>✔</span> One Month Support</li>
			</ul>
			<a href="#" class="btn">Select</a>
		</div>
	</div>
	<div class="column">
		<div class="card">
			<div class="price">
				<sup>$</sup>49
			</div>
			<h3>Standard</h3>
			<ul>
				<li><span>✔</span> Five Pages Template</li>
				<li><span>✔</span> 100% Responsive</li>
				<li><span>✔</span> W3C Validated</li>
				<li><span>✔</span> Well Commented Code</li>
				<li><span>✔</span> Six Month Support</li>
			</ul>
			<a href="#" class="btn">Select</a>
		</div>
	</div>
	<div class="column">
		<div class="card">
			<div class="price">
				<sup>$</sup>99
			</div>
			<h3>Premium</h3>
			<ul>
				<li><span>✔</span> E-commerce Template</li>
				<li><span>✔</span> 100% Responsive</li>
				<li><span>✔</span> W3C Validated</li>
				<li><span>✔</span> Well Commented Code</li>
				<li><span>✔</span> One Year Support</li>
			</ul>
			<a href="#" class="btn">Select</a>
		</div>
	</div>
</div>

</body>
</html>

CSS Code

Copy

*,*:after,*:before{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	-ms-box-sizing: border-box;
	box-sizing: border-box;
}
body{
	font-family: arial;
	font-size: 16px;
	margin: 0;
	background: radial-gradient(circle,#1182b7 60%,#064571 60.1%);
	background-size: cover;
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: space-around;
}
.container{
	width: 100%;
	max-width: 1200px;
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
}

.column{
	flex: 0 0 30%;
	perspective: 1000px
}

.card{
	min-height: 100%;
	position: relative;
	padding: 30px 50px;
	color: #fff;
	font-size: 18px;
	line-height: 1.6;
	letter-spacing: 1px;
	box-shadow: 0 25px 50px rgba(0,0,0,0.1);
	border:1px solid rgba(255,255,255,0.25);
	border-left-color: rgba(255,255,255,0.1);
	border-right-color: rgba(255,255,255,0.1);
	border-radius: 20px;
	background:linear-gradient(to right top, rgba(255,255,255,0.1) 50%, rgba(255,255,255,0.05) 50%);
	backdrop-filter:blur(20px);

	transform: translateZ(50px);
	transition: all 0.6s ease-out;

}
.card .price{
	font-size: 40px;
	font-weight: 900;
	line-height: 1;
	width: 120px;
	height: 120px;
	line-height: 90px;
	text-align: center;
	margin:0 auto 20px;
	border:7px solid #69c500;
	border-radius: 50%;
}
.card .price sup{
	font-size: 20px;
	font-weight: 400;
}
.card h3{
	text-align: center;
	margin:0 0 20px;
	letter-spacing: 5px;
	font-size: 29px;
}
.card ul{
	padding: 0;
	margin: 0 0 20px;
	list-style: none;
}
.card ul li{
	margin-bottom: 5px;
}
.card ul li span{
	color: #69c500;
	font-weight: 900;
	font-size: 20px;
}
.card .btn{
	background-color: #69c500;
	color: #fff;
	display: block;
	margin: 0 auto;
	max-width: 150px;
	padding: 8px 20px;
	border-radius: 5px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
	transition: all 0.3s ease-out;
	font-weight: 700;
	font-size: 16px;
}
.card .btn:hover{
	background-color: #4d8211;
}
.column:nth-child(2) .card .price{
	border-color: #ff9800;
}
.column:nth-child(2) .card .btn{
	background-color: #ff9800;
}
.column:nth-child(2) .card .btn:hover{
	background-color: #e08600;
}
.column:nth-child(3) .card .price{
	border-color: #ff5722;
}
.column:nth-child(3) .card .btn{
	background-color: #ff5722;
}
.column:nth-child(3) .card .btn:hover{
	background-color: #de3c09;
}
.card:hover{
	transform: rotateX(20deg) translateZ(-30px) translateY(-20px);
}