Display
噪点渐变背景
带有颗粒胶片噪点纹理叠加的柔和动画渐变背景。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
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.
中文提示词
创建一个深色区域,带有缓慢变化的渐变背景和半透明噪点纹理叠加。渐变应在深紫、蓝和黑色调之间移动。噪点应添加模拟颗粒感而不降低可读性。使用 CSS 渐变、SVG 滤镜生成噪点、keyframes 实现渐变动画。使用 Tailwind CSS。居中放置短标题和段落。

Overview
结合平滑渐变和模拟颗粒的电影感背景。适合为深色区域增添氛围。
Features
- 缓慢变化的渐变
- 胶片噪点纹理叠加
- 深紫/蓝/黑色调
- CSS + SVG 滤镜
- 居中标题 + 段落
- 可读对比度
Usage
适用于 hero 区域、等待列表或沉浸式落地页。
Customization
修改 prompt 以:
- 改为暖色调
- 增加/降低噪点强度
- 添加微妙暗角
- 渐变移动与滚动绑定