# Frosted glass (C 028)

Category: Cards  
Tags: glass, glassmorphism, blur, gradient, light  
Page: https://designforai.dev/snippet/card-028

## 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.

## HTML

```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>
```

## CSS

```css
.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; }
```