Design for AIMilchglas
Milchglas: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
Frosted panel
Translucent surface with a blurred backdrop and a soft white edge.
OpenCSS
.card-028-bg {
display: inline-block;
padding: 40px;
border-radius: 24px;
background: linear-gradient(135deg,#f472b6,#8b5cf6 50%,#22d3ee)
}
.card-028 {
width: 280px;
padding: 24px;
background: rgba(255,255,255,.22);
border: 1px solid rgba(255,255,255,.45);
border-radius: 18px;
backdrop-filter: blur(14px);
-webkit-backdrop-filter: blur(14px);
box-shadow: 0 8px 32px rgba(31,38,135,.25);
font-family: system-ui,sans-serif;
color: #fff;
transition: background .2s
}
.card-028:hover {
background: rgba(255,255,255,.32)
}
.card-028 h3 {
margin: 0 0 6px;
font-size: 20px
}
.card-028 p {
margin: 0 0 16px;
font-size: 14px;
line-height: 1.5;
opacity: .9
}
.card-028 a {
display: inline-block;
padding: 8px 16px;
border-radius: 999px;
background: rgba(255,255,255,.35);
color: #fff;
font-size: 13px;
font-weight: 600;
text-decoration: none;
transition: background .2s,color .2s
}
.card-028 a:hover {
background: #fff;
color: #7c3aed
}
.card-028 :is(a,button,input,select,textarea):focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }
HTML
<div class="card-028-bg">
<article class="card-028">
<h3>Frosted panel</h3>
<p>Translucent surface with a blurred backdrop and a soft white edge.</p>
<a href="#">Open</a>
</article>
</div>Prompt
Baue eine Glassmorphism-Card auf einem 135deg Gradient-Hintergrund (#f472b6 zu #8b5cf6 zu #22d3ee, 40px Padding, 24px Radius). Die Card ist 280px breit, 24px Padding, Hintergrund rgba(255,255,255,.22), 1px Rahmen rgba(255,255,255,.45), 18px Radius, backdrop-filter blur 14px, Schatten 0 8px 32px rgba(31,38,135,.25). Weißer 20px Titel, 14px Text bei 90% Deckkraft und ein Pillen-Link auf rgba(255,255,255,.35), der beim Hover deckend weiß mit #7c3aed Text wird. Der Card-Hintergrund hellt beim Hover auf .32 Alpha auf.