Design for AIGranulação de papel
Granulação de papel: um card em CSS. Copie as regras, ou o prompt que o reconstrói.
Paper grain
An inline feTurbulence SVG layered over the gradient adds film-like noise.
CSS
.card-091 {
position: relative;
width: 280px;
padding: 26px;
border-radius: 14px;
overflow: hidden;
background: linear-gradient(160deg,#fdba74,#c2410c);
color: #431407;
font-family: Georgia,serif;
isolation: isolate
}
.card-091::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
opacity: .35;
mix-blend-mode: multiply;
background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")
}
.card-091:hover::after {
opacity: .5
}
.card-091 h3 {
margin: 0 0 8px;
font-size: 24px;
font-weight: 700;
letter-spacing: -.01em
}
.card-091 p {
margin: 0;
font-size: 14px;
line-height: 1.55;
font-family: system-ui,sans-serif;
color: #7c2d12
}
HTML
<article class="card-091">
<h3>Paper grain</h3>
<p>An inline feTurbulence SVG layered over the gradient adds film-like noise.</p>
</article>Prompt
Construa um card de 280px com um gradiente quente de 160deg (#fdba74 para #c2410c), raio de 14px, padding de 26px, e uma textura de granulação de filme: uma camada ::after preenchida com um SVG inline em data-URI usando feTurbulence (fractalNoise, baseFrequency .9, 3 oitavas), a 35% de opacidade com mix-blend-mode multiply, subindo para 50% no hover. Título 24px Georgia serifada em #431407, corpo 14px sans-serif em #7c2d12.