Backgrounds & Visuals

Zen Haze

Minimal soft blur with subtle gradient creating a zen-like atmosphere.

blurzenhazeminimalsoft

Props

Customize the component with these props

PropertyTypeDefaultDescription
backgroundColor
string#f3f4f6Background color
blobGradientFrom
string#a7f3d0Blob gradient start color
blobGradientTo
string#99f6e4Blob gradient end color
blobSize
string40vwBlob size
blobMinSize
string300pxBlob minimum size
blobBlur
string80pxBlob blur
blobOpacity
number0.8Blob opacity
blobScale
number[][1, 1.2, 1]Blob scale animation
blobDuration
number6Blob animation duration
overlayColor
stringrgba(255, 255, 255, 0.6)Overlay color
overlayBlur
string3xlOverlay blur
gradientFrom
stringrgba(240, 253, 250, 0.5)Gradient start color
gradientTo
stringtransparentGradient end color
noiseOpacity
number0.15Noise overlay opacity
noiseBaseFrequency
string0.8Noise base frequency
noiseOctaves
number3Noise octaves
text
stringZenText label
textColor
stringrgba(255, 255, 255, 0.9)Text color
className
stringAdditional CSS classes
Zen Haze - Backgrounds & Visuals Component | UILora