Design for AIPapierkorn-Rauschen
Papierkorn-Rauschen: CSS-Card. Kopiere die Regeln oder den Prompt, der das Ergebnis nachbaut.
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
Baue eine 280px Card mit warmem 160deg Gradient (#fdba74 zu #c2410c), 14px Radius, 26px Padding und einer Filmkorn-Textur: eine ::after Ebene, gefüllt mit einem inline data-URI SVG mit feTurbulence (fractalNoise, baseFrequency .9, 3 Oktaven), bei 35% Deckkraft mit mix-blend-mode multiply, beim Hover auf 50% steigend. Titel 24px Georgia Serif in #431407, Fließtext 14px serifenlos in #7c2d12.