Frost Glass Mesh
Frosted glass gradient with animated color blobs and backdrop blur.
Main Features of Frost Glass Mesh
How to Use Frost Glass Mesh in Next.js
Installation Guide for Frost Glass Mesh
Props
Customize the component with these props
| Property | Type | Default | Description |
|---|---|---|---|
backgroundColor | string | #ffffff | Background color |
blob1Color | string | #c084fc | First blob color |
blob1Size | string | 60vw | First blob size |
blob1Blur | string | 100px | First blob blur |
blob1Opacity | number | 0.6 | First blob opacity |
blob1Position | string | top-0 left-0 | First blob position |
blob1TranslateX | number[] | [0, 100, 0] | First blob X translation |
blob1TranslateY | number[] | [0, -50, 0] | First blob Y translation |
blob1Duration | number | 10 | First blob animation duration |
blob2Color | string | #93c5fd | Second blob color |
blob2Size | string | 60vw | Second blob size |
blob2Blur | string | 100px | Second blob blur |
blob2Opacity | number | 0.6 | Second blob opacity |
blob2Position | string | bottom-0 right-0 | Second blob position |
blob2TranslateX | number[] | [0, -100, 0] | Second blob X translation |
blob2TranslateY | number[] | [0, 50, 0] | Second blob Y translation |
blob2Duration | number | 12 | Second blob animation duration |
blob3Color | string | #f9a8d4 | Third blob color |
blob3Size | string | 40vw | Third blob size |
blob3Blur | string | 80px | Third blob blur |
blob3Opacity | number | 0.5 | Third blob opacity |
blob3Scale | number[] | [1, 1.2, 1] | Third blob scale animation |
blob3Duration | number | 8 | Third blob animation duration |
overlayColor | string | rgba(255, 255, 255, 0.1) | Overlay color |
overlayBlur | string | 100px | Overlay blur |
gradientFrom | string | transparent | Gradient start color |
gradientVia | string | rgba(255, 255, 255, 0.4) | Gradient middle color |
gradientTo | string | rgba(255, 255, 255, 0.1) | Gradient end color |
title | string | Frosted | Title text |
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, the `overlayBlur` prop controls how 'milky' the glass appears, ranging from a subtle soften to a thick, opaque frost.
QAre the blobs animated?
Yes, all 3 blobs move on independent paths with varying durations to create a constant, non-repeating flow of color.
QIs it mobile responsive?
Absolutely, the blob sizes and blur amounts scale to ensure the frosted effect remains consistent on smaller screens.