Library Backgrounds

Noise Gradient

Soft gradient wash with film grain overlay.

Soft gradient wash with film grain overlay.将本资源作为视觉与交互简报使用。把 Prompt 复制到 AI 编程工具，再按你的产品调整布局、品牌语气与动效强度。

Back to Library

Then paste it into your favorite AI coding tool.

Details

Type: Backgrounds
Category: Atmosphere
Style: Cinematic
Tech stack: CSS
Animation: Gradient
Difficulty: Beginner
License: Personal
Access: Free
Views: 841

Gradient
Grain
CSS

Copy. Paste. Create.

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

CSS noise gradient background with SVG turbulence overlay, low opacity.

Code

<!-- HTML -->
<div class="bg" id="bg"></div>

/* CSS */
.bg{width:100%;height:100%;background:linear-gradient(125deg,hsl(223 85% 62%),hsl(286 70% 55%),#050505 70%);background-size:200% 200%;animation:flow 8s ease-in-out infinite}@keyframes flow{50%{background-position:100% 50%}}

// JS