Design for AIFrosted glass
Frosted glass: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Build a glassmorphism card sitting on a 135deg gradient backdrop (#f472b6 to #8b5cf6 to #22d3ee, 40px padding, 24px radius). The card is 280px wide, 24px padding, background rgba(255,255,255,.22), 1px border rgba(255,255,255,.45), 18px radius, backdrop-filter blur 14px, shadow 0 8px 32px rgba(31,38,135,.25). White 20px title, 14px text at 90% opacity, and a pill link on rgba(255,255,255,.35) that turns solid white with #7c3aed text on hover. Card background brightens to .32 alpha on hover.