Library Backgrounds

单色颗粒

单色胶片颗粒氛围层，不干扰文字对比。

胶片颗粒层单色胶片颗粒氛围层，不干扰文字对比。将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

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