Liquid Glass Effect

[connorcarro]

How can I have the liquid glass effect that the FluidGlass demo provides but apply that refraction effect to my own element, not sure how this is done.

Thanks!

[connorcarro]

For example how can I easily add this effect to the background of a button I created?

[devtunis]

.glass {
background: rgba(255,255,255,0.1);
backdrop-filter: blur(20px);
-webkit-backdrop-filter: blur(20px);
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.2);
}

[DavidHDev]

Hi there, the GlassSurface component will help you do something like that. FluidGlass only works with the three presets or your own .glb files which you can use, so it doesn't make it ideal for quick custom shapes.

Check out https://reactbits.dev/components/glass-surface

[connorcarro]

Thank you.