Nachtglas mit Blobs
Nachtglas mit Blobs: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Erstelle eine dunkle Glas-Card auf einem #0a0a0f Hintergrund mit zwei verschwommenen Farb-Blobs (180px Kreise, blur 40px, #7c3aed oben links und #06b6d4 unten rechts). Die Card ist 270px, Padding 22px, Hintergrund rgba(17,25,40,.55), 1px Rahmen rgba(255,255,255,.12), der beim Hover auf .25 aufhellt, 16px Radius, backdrop-filter blur 16px und eine 1px Glanzlinie entlang der Oberkante (horizontaler Gradient transparent zu weiß 70% zu transparent). Inhalt: 11px cyanfarbenes #a5f3fc Versalien-Tag "Beta", 20px weißer Titel, 14px #cbd5e1 Text.