Frosted Glass
Blur and noise combination creating a frosted glass texture with backdrop blur.
Main Features of Frosted Glass
How to Use Frosted Glass in Next.js
Installation Guide for Frosted Glass
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 |
Related Components
Interstellar Fluid Hero
Interactive fluid simulation creating cosmic nebula effects with mouse interaction. Deep space aesthetic with animated gas clouds and star trails.
Interstellar Background Hero
Warp tunnel effect simulating high-velocity travel through nebular clusters. Procedural WebGL engine with mouse-responsive space distortion.
Liquid Chrome Hero
Procedural simulation of molten chrome alloys with velocity-based distortion. Interactive liquid metal surface with specular highlights.
When to Use
Best Practices
Why This Component Matters in Modern UI Development
Frequently Asked Questions
QCan I adjust the frosting intensity?
Yes, you can control the translucency via `glassBgColor` and the 'graininess' via the `noiseOpacity` and `noiseBaseFrequency` props.
QHow large are the underlying blobs?
The blobs scale via `blob1Size` and `blob2Size`, and their movement creates the shifting color spectrum visible through the glass.
QDoes it support backdrop blur?
Yes, it uses an advanced combination of CSS `backdrop-filter` and SVG noise to create a realistic frosted glass interaction with anything behind it.