Design for AIElevación con brillo
Elevación con brillo: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
Lift and glow
Rises on hover and casts a tinted shadow instead of a gray one.
CSS
.card-036 {
width: 270px;
padding: 14px;
background: #fff;
border-radius: 18px;
border: 1px solid #ede9fe;
font-family: system-ui,sans-serif;
color: #1e1b4b;
transition: transform .25s cubic-bezier(.2,.8,.2,1),box-shadow .25s
}
.card-036:hover {
transform: translateY(-8px);
box-shadow: 0 24px 48px -12px rgba(124,58,237,.45)
}
.card-036__img {
height: 150px;
border-radius: 12px;
background: linear-gradient(135deg,#c4b5fd,#7c3aed)
}
.card-036 h3 {
margin: 14px 4px 4px;
font-size: 17px
}
.card-036 p {
margin: 0 4px 6px;
font-size: 13px;
line-height: 1.5;
color: #6d28d9
}
HTML
<article class="card-036">
<div class="card-036__img"></div>
<h3>Lift and glow</h3>
<p>Rises on hover and casts a tinted shadow instead of a gray one.</p>
</article>Prompt
Construye una tarjeta blanca de 270px con padding 14px, radio 18px y un borde tenue 1px #ede9fe. Marcador de imagen de 150px con radio 12px y un degradado violeta a 135deg de #c4b5fd a #7c3aed. Título 17px #1e1b4b, texto 13px en #6d28d9. En hover eleva la tarjeta 8px con una transición con rebote cubic-bezier(.2,.8,.2,1) de 250ms y añade una sombra con brillo violeta 0 24px 48px -12px rgba(124,58,237,.45).