Display
Noise Gradient Background
A soft animated gradient background with a grainy film-noise texture overlay.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
Create a dark section with a slow-shifting gradient background and a semi-transparent noise texture overlay. The gradient should move between deep purple, blue, and black tones. The noise should add analog grain without reducing readability. Use CSS gradients, SVG filters for noise, and keyframes for the gradient animation. Use Tailwind CSS. Center a short headline and paragraph.
Chinese Prompt
创建一个深色区域,带有缓慢变化的渐变背景和半透明噪点纹理叠加。渐变应在深紫、蓝和黑色调之间移动。噪点应添加模拟颗粒感而不降低可读性。使用 CSS 渐变、SVG 滤镜生成噪点、keyframes 实现渐变动画。使用 Tailwind CSS。居中放置短标题和段落。

Overview
A cinematic background that combines smooth gradients with analog grain. Great for adding atmosphere to dark sections.
Features
- Slow-shifting gradient
- Film-noise texture overlay
- Deep purple/blue/black palette
- CSS + SVG filter
- Centered headline + paragraph
- Readable contrast
Usage
Use for hero sections, waitlists, or immersive landing pages.
Customization
Modify the prompt to:
- Change palette to warm tones
- Increase/decrease noise intensity
- Add a subtle vignette
- Tie gradient shift to scroll