<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Glassmorphism</title>
</head>
<body>
<div class="glass-card-grid">
<article class="glass-card">
<h3 class="glass-card-title">
<a href="#"> Title </a>
</h3>
<div class="tags">
<a href="#" rel="tag">tag 1</a>
<a href="#" rel="tag">tag 2</a>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus
excepturi veritatis vitae corporis! Dolorum soluta similique qui
assumenda. Suscipit in voluptatibus nam iure obcaecati. Officiis
minima illo inventore magni odio.
</p>
<div class="author-row">
<a class="author-name" href="#"> Author </a>
</div>
</article>
<article class="glass-card">
<h3 class="glass-card-title">
<a href="#"> Title </a>
</h3>
<div class="tags">
<a href="#" rel="tag">tag 1</a>
<a href="#" rel="tag">tag 2</a>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus
excepturi veritatis vitae corporis! Dolorum soluta similique qui
assumenda. Suscipit in voluptatibus nam iure obcaecati. Officiis
minima illo inventore magni odio.
</p>
<div class="author-row">
<a class="author-name" href="#"> Author </a>
</div>
</article>
<article class="glass-card">
<h3 class="glass-card-title">
<a href="#"> Title </a>
</h3>
<div class="tags">
<a href="#" rel="tag">tag 1</a>
<a href="#" rel="tag">tag 2</a>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus
excepturi veritatis vitae corporis! Dolorum soluta similique qui
assumenda. Suscipit in voluptatibus nam iure obcaecati. Officiis
minima illo inventore magni odio.
</p>
<div class="author-row">
<a class="author-name" href="#"> Author </a>
</div>
</article>
<article class="glass-card">
<h3 class="glass-card-title">
<a href="#"> Title </a>
</h3>
<div class="tags">
<a href="#" rel="tag">tag 1</a>
<a href="#" rel="tag">tag 2</a>
</div>
<p>
Lorem ipsum dolor sit, amet consectetur adipisicing elit. Natus
excepturi veritatis vitae corporis! Dolorum soluta similique qui
assumenda. Suscipit in voluptatibus nam iure obcaecati. Officiis
minima illo inventore magni odio.
</p>
<div class="author-row">
<a class="author-name" href="#"> Author </a>
</div>
</article>
</div>
</body>
</html>
body {
background: linear-gradient(130deg, #1a2a6c, #b21f1f 41.07%, #fdbb2d 76.05%);
min-height: 100vh;
font-family: sans-serif;
background-size: cover;
@media only screen and (max-width: 600px) {
background: linear-gradient(95deg, #1a2a6c, #b21f1f 41.07%, #fdbb2d 76.05%);
}
}
.glass-card-grid {
padding: 3rem 2rem 3rem 2rem;
margin: 0;
display: flex;
overflow-x: hidden;
position: relative;
@media only screen and (max-width: 600px) {
flex-direction: column;
}
.glass-card {
width: 300px;
min-height: 350px;
box-shadow: -2rem 0 3rem -2rem #000;
padding: 1.5rem;
color: #fff;
display: flex;
flex-direction: column;
transition: 0.2s;
margin: 0;
border-radius: 10px;
border: 1px solid rgba(255, 255, 255, 0.18);
backdrop-filter: blur(15px);
position: relative;
@media only screen and (max-width: 600px) {
box-shadow: 0rem -20px 3rem -1rem #000;
}
&:hover {
transform: translateY(-1rem) rotate(3deg);
}
&:first-child:hover {
transform: translate(-0.5rem, -1rem) rotate(3deg);
}
&:not(:first-child) {
margin-left: -130px;
box-shadow: -3rem 0 3rem -2rem #000;
@media only screen and (max-width: 600px) {
margin-left: auto;
margin-top: -50px;
box-shadow: 0rem -20px 3rem -1rem #000;
}
}
.glass-card-title {
font-size: 1.3rem;
margin: 0 0 1rem;
}
a {
text-decoration: none;
color: #fff;
}
p {
font-weight: normal;
line-height: 1.5rem;
}
.tags a {
font-style: normal;
font-weight: 800;
text-transform: uppercase;
color: #ff7a18;
font-size: 0.66rem;
margin-inline-end: 0.66rem;
}
.author-row {
margin-block-start: auto;
display: grid;
grid-template-columns: 40px 1fr;
gap: 0.5rem;
align-items: center;
color: #565656;
line-height: 1.3;
}
}
}
External CSS
This Pen doesn't use any external CSS resources.
External JavaScript
This Pen doesn't use any external JavaScript resources.