Library Backgrounds

Monochrome Grain

Film grain on a dark canvas via performance-safe SVG noise at very low opacity.

Film grain canvasFilm grain on a dark canvas via performance-safe SVG noise at very low opacity.Use this asset as a visual and interaction brief. Copy the prompt into your AI coding tool, then adapt layout, brand voice and motion intensity to your product.

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Creative
Style: Dark
Tech stack: CSS
Animation: Grain
Difficulty: Beginner
License: Personal
Access: Free
Creator: Lena Park
Views: 562

Grain
CSS

Copy. Paste. Create.

This prompt is engineered to communicate visual direction, layout, interaction, animation and technical requirements.

Create a monochrome grain background: dark base + SVG feTurbulence noise overlay at opacity ~0.04–0.08. Prefer CSS background-image data-URI. No JS loop. Optional slow opacity pulse disabled under reduced motion.

Code

<!-- HTML -->
<div class="n"><div class="wash"></div><p>Grain Field</p></div>

/* CSS */
.n{position:relative;width:100%;height:100%;display:grid;place-items:center;background:#080808}.wash{position:absolute;inset:0;background:radial-gradient(circle at 40% 30%,hsl(318 85% 62%)33,transparent 50%),radial-gradient(circle at 70% 60%,hsl(36 70% 55%)22,transparent 45%);opacity:.9}.n p{position:relative;margin:0;font:600 13px/1 system-ui;letter-spacing:.18em;text-transform:uppercase;color:rgba(255,255,255,.55)}.n::after{content:"";position:absolute;inset:0;opacity:.35;pointer-events:none;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E")}

// JS