Design for AICristal nocturno
Cristal nocturno: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Crea una tarjeta de cristal oscura sobre un fondo #0a0a0f con dos manchas de color difuminadas (círculos de 180px, blur 40px, #7c3aed arriba a la izquierda y #06b6d4 abajo a la derecha). La tarjeta mide 270px, padding 22px, fondo rgba(17,25,40,.55), borde 1px rgba(255,255,255,.12) que se aclara a .25 en hover, radio 16px, backdrop-filter blur 16px, y una línea de brillo de 1px a lo largo del borde superior (degradado horizontal de transparente a blanco 70% a transparente). Contenido: etiqueta cian #a5f3fc de 11px en mayúsculas "Beta", título blanco 20px, texto 14px #cbd5e1.