Display
网格图案叠加
深色背景上向远处淡出的微妙透视网格叠加。
作者:mcpSkills
框架
nextjs
UI 库
shadcntailwind
难度intermediate
英文提示词
Create a dark section with a perspective grid overlay. The grid lines should converge toward a vanishing point near the bottom center, creating a floor-like perspective. Fade the grid to transparent at the top and sides. Use CSS gradients or SVG for the grid. Use Tailwind CSS. Center a headline and CTA above the grid.
中文提示词
创建一个深色区域,带有透视网格叠加。网格线应向底部中心附近的消失点汇聚,形成类似地面的透视。顶部和两侧网格淡出至透明。使用 CSS 渐变或 SVG 绘制网格。使用 Tailwind CSS。在网格上方居中放置标题和 CTA。

Overview
营造深度和空间感的科技风背景。常见于开发工具、赛博朋克和 SaaS 落地页。
Features
- 透视网格线
- 消失点
- 顶部/两侧淡出
- 地面般深度
- CSS 渐变或 SVG
- 居中内容
Usage
适用于 hero 区域、CTA 区域或具有科技美学的产品演示。
Customization
修改 prompt 以:
- 动画网格线向观看者移动
- 网格交叉点添加发光
- 网格颜色改为品牌强调色
- 添加地平线发光