Design for AIImagem com fade inferior
Imagem com fade inferior: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Case study
Rebuilding a checkout in six weeks
CSS
.card-003 {
position: relative;
width: 300px;
height: 380px;
border-radius: 18px;
overflow: hidden;
background: linear-gradient(200deg,#0ea5e9,#6366f1 55%,#312e81);
font-family: system-ui,sans-serif;
color: #fff
}
.card-003::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(to top,rgba(0,0,0,.75) 0,rgba(0,0,0,0) 55%)
}
.card-003__text {
position: absolute;
left: 22px;
right: 22px;
bottom: 22px;
z-index: 1
}
.card-003 small {
display: block;
margin-bottom: 6px;
font-size: 12px;
letter-spacing: .08em;
text-transform: uppercase;
opacity: .8
}
.card-003 h3 {
margin: 0;
font-size: 22px;
line-height: 1.2
}
.card-003:hover::after {
background: linear-gradient(to top,rgba(0,0,0,.85) 0,rgba(0,0,0,.1) 70%)
}
HTML
<article class="card-003">
<div class="card-003__text">
<small>Case study</small>
<h3>Rebuilding a checkout in six weeks</h3>
</div>
</article>Prompt
Crie um card retrato de 300x380px, raio de 18px, totalmente coberto por um gradiente de 200deg #0ea5e9 para #6366f1 para #312e81 como imagem. Sobreponha um fade de baixo para cima de rgba(0,0,0,.75) a transparente em 55%. Ancore o texto no canto inferior esquerdo com inset de 22px: um label em caixa alta 12px "Case study" a 80% de opacidade e um título branco de 22px. No hover aprofunde o fade para que ele alcance 70% da altura do card.