Backgrounds & Visuals

Cyber Diffusion

Neon glow effect with blurred lines creating a cyberpunk aesthetic.

blurcyberneonglowdiffusion

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#000000Background color
radialGradientFrom
string#0f172aRadial gradient start color
radialGradientVia
string#000000Radial gradient middle color
radialGradientTo
string#000000Radial gradient end color
radialOpacity
number0.8Radial gradient opacity
beamAngles
number[][0, 45, 90, 135]Angles for beam layers
beamColor
string#06b6d4Beam color
beamWidth
string150%Beam width
beamBlur
stringxlBeam blur amount
beamOpacity
number[][0.4, 0.8, 0.4]Beam opacity animation values
beamBaseOpacity
number0.6Base beam opacity
beamDuration
number3Beam animation duration
layer2Angles
number[][0, 45, 90, 135]Angles for second layer
layer2Color
string#9333eaSecond layer color
layer2Width
string150%Second layer width
layer2Height
string8remSecond layer height
layer2Blur
string80pxSecond layer blur
layer2Opacity
number0.3Second layer opacity
layer2Offset
number20Second layer angle offset
noiseUrl
stringhttps://grainy-gradients.vercel.app/noise.svgNoise texture URL
noiseOpacity
number0.2Noise overlay opacity
text
stringNeonText label
textColor
stringrgba(255, 255, 255, 0.9)Text color
className
stringAdditional CSS classes
Cyber Diffusion - Backgrounds & Visuals Component | UILora