Night glass blobs
Night glass blobs: a CSS card. Copy the rules, or the prompt that rebuilds it.
Night glass
Dark translucent surface, one bright top edge, color bleeding through from behind.
CSS
.card-029-bg {
position: relative;
display: inline-block;
padding: 44px;
border-radius: 24px;
background: #0a0a0f;
overflow: hidden
}
.card-029-bg::before,.card-029-bg::after {
content: "";
position: absolute;
width: 180px;
height: 180px;
border-radius: 50%;
filter: blur(40px)
}
.card-029-bg::before {
left: -20px;
top: -20px;
background: #7c3aed
}
.card-029-bg::after {
right: -30px;
bottom: -30px;
background: #06b6d4
}
.card-029 {
position: relative;
width: 270px;
padding: 22px;
background: rgba(17,25,40,.55);
border: 1px solid rgba(255,255,255,.12);
border-radius: 16px;
backdrop-filter: blur(16px);
-webkit-backdrop-filter: blur(16px);
font-family: system-ui,sans-serif;
color: #f8fafc;
overflow: hidden
}
.card-029::before {
content: "";
position: absolute;
left: 0;
right: 0;
top: 0;
height: 1px;
background: linear-gradient(90deg,transparent,rgba(255,255,255,.7),transparent)
}
.card-029__tag {
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
text-transform: uppercase;
color: #a5f3fc
}
.card-029 h3 {
margin: 6px 0;
font-size: 20px
}
.card-029 p {
margin: 0;
font-size: 14px;
line-height: 1.5;
color: #cbd5e1
}
.card-029:hover {
border-color: rgba(255,255,255,.25)
}
HTML
<div class="card-029-bg">
<article class="card-029">
<span class="card-029__tag">Beta</span>
<h3>Night glass</h3>
<p>Dark translucent surface, one bright top edge, color bleeding through from behind.</p>
</article>
</div>Prompt
Create a dark glass card on a #0a0a0f backdrop that has two blurred color blobs (180px circles, blur 40px, #7c3aed top-left and #06b6d4 bottom-right). The card is 270px, padding 22px, background rgba(17,25,40,.55), 1px border rgba(255,255,255,.12) that brightens to .25 on hover, 16px radius, backdrop-filter blur 16px, and a 1px highlight line along the top edge (horizontal gradient transparent to white 70% to transparent). Content: uppercase 11px cyan #a5f3fc tag "Beta", 20px white title, 14px #cbd5e1 text.