Design for AIPaper grain noise
Paper grain noise: a CSS card. Copy the rules, or the prompt that rebuilds it.
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
Build a 280px card with a warm 160deg gradient (#fdba74 to #c2410c), 14px radius, 26px padding, and a film-grain texture: an ::after layer filled with an inline data-URI SVG using feTurbulence (fractalNoise, baseFrequency .9, 3 octaves), at 35% opacity with mix-blend-mode multiply, rising to 50% on hover. Title 24px Georgia serif in #431407, body 14px sans-serif in #7c2d12.