# Vidro fosco (C 028)

Categoria: Cards  
Tags: glass, glassmorphism, blur, gradient, light  
Página: https://designforai.dev/pt/snippet/card-028

## Prompt

Construa um card glassmorphism sobre um fundo em gradiente de 135deg (#f472b6 para #8b5cf6 para #22d3ee, padding de 40px, raio de 24px). O card tem 280px de largura, padding de 24px, fundo rgba(255,255,255,.22), borda de 1px rgba(255,255,255,.45), raio de 18px, backdrop-filter blur 14px, sombra 0 8px 32px rgba(31,38,135,.25). Título branco 20px, texto 14px a 90% de opacidade, e um link em pílula sobre rgba(255,255,255,.35) que vira branco sólido com texto #7c3aed no hover. O fundo do card clareia para alfa .32 no 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; }
```