Backgrounds & Visuals
Frosted Prism
Glass refraction effect with rotating conic gradient and frosted backdrop blur.
blurglassprismrefractionfrosted
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #ffffff | Background color |
conicGradientColors | string | #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000 | Comma-separated colors for conic gradient |
conicOpacity | number | 0.8 | Opacity of conic gradient |
conicSize | string | 200% | Size of conic gradient |
conicPosition | string | top-[-50%] left-[-50%] | Position of conic gradient |
conicDuration | number | 30 | Rotation duration in seconds |
panelBgColor | string | rgba(255, 255, 255, 0.3) | Panel background color |
panelBlur | string | 100px | Panel blur amount |
panelBorderColor | string | rgba(255, 255, 255, 0.2) | Panel border color |
panelPadding | string | 1rem | Panel padding |
panelPaddingMd | string | 3rem | Panel padding on medium screens |
panelBorderRadius | string | 1.5rem | Panel border radius |
overlayColor | string | rgba(255, 255, 255, 0.2) | Overlay color |
overlayOpacity | number | 1 | Overlay opacity |
noiseOpacity | number | 0.25 | Noise overlay opacity |
noiseBaseFrequency | string | 0.8 | Noise base frequency |
noiseOctaves | number | 3 | Noise octaves |
text | string | Frost | Text label |
textColor | string | rgba(255, 255, 255, 0.9) | Text color |
className | string | Additional CSS classes |