Design for AIGrano de papel
Grano de papel: tarjeta en CSS. Copia las reglas, o el prompt que reproduce el resultado.
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
Construye una tarjeta de 280px con un degradado cálido a 160deg (#fdba74 a #c2410c), radio 14px, padding 26px, y una textura de grano de película: una capa ::after rellena con un SVG inline en data-URI que usa feTurbulence (fractalNoise, baseFrequency .9, 3 octavas), al 35% de opacidad con mix-blend-mode multiply, subiendo al 50% en hover. Título 24px serif Georgia en #431407, cuerpo 14px sans-serif en #7c2d12.