Backgrounds & Visuals
Cyber Diffusion
Neon glow effect with blurred lines creating a cyberpunk aesthetic.
blurcyberneonglowdiffusion
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #000000 | Background color |
radialGradientFrom | string | #0f172a | Radial gradient start color |
radialGradientVia | string | #000000 | Radial gradient middle color |
radialGradientTo | string | #000000 | Radial gradient end color |
radialOpacity | number | 0.8 | Radial gradient opacity |
beamAngles | number[] | [0, 45, 90, 135] | Angles for beam layers |
beamColor | string | #06b6d4 | Beam color |
beamWidth | string | 150% | Beam width |
beamBlur | string | xl | Beam blur amount |
beamOpacity | number[] | [0.4, 0.8, 0.4] | Beam opacity animation values |
beamBaseOpacity | number | 0.6 | Base beam opacity |
beamDuration | number | 3 | Beam animation duration |
layer2Angles | number[] | [0, 45, 90, 135] | Angles for second layer |
layer2Color | string | #9333ea | Second layer color |
layer2Width | string | 150% | Second layer width |
layer2Height | string | 8rem | Second layer height |
layer2Blur | string | 80px | Second layer blur |
layer2Opacity | number | 0.3 | Second layer opacity |
layer2Offset | number | 20 | Second layer angle offset |
noiseUrl | string | https://grainy-gradients.vercel.app/noise.svg | Noise texture URL |
noiseOpacity | number | 0.2 | Noise overlay opacity |
text | string | Neon | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |