Backgrounds & Visuals
Frosted Glass
Blur and noise combination creating a frosted glass texture with backdrop blur.
noisefrostedglassblurtexture
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #e2e8f0 | Background color |
blob1Color | string | #60a5fa | First blob color |
blob2Color | string | #f472b6 | Second blob color |
blob1Size | string | 24rem | First blob size |
blob2Size | string | 20rem | Second blob size |
blob1Opacity | number | 0.7 | First blob opacity |
blob2Opacity | number | 0.7 | Second blob opacity |
blob1Duration | number | 10 | First blob animation duration |
blob2Duration | number | 12 | Second blob animation duration |
blurAmount | string | 80px | Blur amount |
noiseOpacity | number | 0.15 | Noise overlay opacity |
noiseBaseFrequency | string | 1.5 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
glassBgColor | string | rgba(255, 255, 255, 0.3) | Glass background color |
glassBorderColor | string | rgba(255, 255, 255, 0.4) | Glass border color |
text | string | Frosted | Text label |
textColor | string | #1e293b | Text color |
className | string | Additional CSS classes |