Backgrounds & Visuals
Retro Vapor Grid
Synthwave aesthetic with 3D perspective grid and retro vaporwave colors.
gradientretrovaporsynthwavegrid
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #1a0b2e | Background color |
perspective | string | 1000px | 3D perspective |
topGradientFrom | string | rgba(255, 0, 128, 0.2) | Top gradient start color |
topGradientVia | string | transparent | Top gradient middle color |
topGradientTo | string | transparent | Top gradient end color |
sunGradientFrom | string | #ff71ce | Sun gradient start color |
sunGradientTo | string | #fdb927 | Sun gradient end color |
sunSize | string | 16rem | Sun size |
sunBlur | string | 2xl | Sun blur |
sunPosition | string | bottom-[40%] | Sun position |
gridColor | string | rgba(180, 50, 210, 0.4) | Grid color |
gridSize | string | 80px | Grid size |
gridRotateX | number | 60 | Grid X rotation |
gridDuration | number | 1 | Grid animation duration |
bottomGradientFrom | string | #2b0f42 | Bottom gradient start color |
bottomGradientVia | string | rgba(43, 15, 66, 0.8) | Bottom gradient middle color |
bottomGradientTo | string | transparent | Bottom gradient end color |
grainOpacity | number | 0.15 | Grain overlay opacity |
grainBaseFrequency | string | 0.65 | Grain base frequency |
grainOctaves | number | 3 | Grain octaves |
title | string | Synthwave | Title text |
className | string | Additional CSS classes |