Display
Grid Pattern Overlay
A subtle perspective grid overlay that fades into the distance on a dark background.
by mcpSkills
Framework
nextjs
UI Library
shadcntailwind
Difficultyintermediate
English Prompt
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.
Chinese Prompt
创建一个深色区域，带有透视网格叠加。网格线应向底部中心附近的消失点汇聚，形成类似地面的透视。顶部和两侧网格淡出至透明。使用 CSS 渐变或 SVG 绘制网格。使用 Tailwind CSS。在网格上方居中放置标题和 CTA。
## Overview
A tech-flavored background that creates depth and space. Common in developer tools, cyberpunk, and SaaS landing pages.
## Features
- Perspective grid lines
- Vanishing point
- Top/side fade
- Floor-like depth
- CSS gradients or SVG
- Centered content
## Usage
Use for hero sections, CTA areas, or product demos with a tech aesthetic.
## Customization
Modify the prompt to:
- Animate grid lines moving toward the viewer
- Add a glow to grid intersections
- Change grid color to brand accent
- Add a horizon glow