It took almost a year to create a React component for the famous Liquid Glass... but it has flaws.

lucas lopes — Wed, 01 Jul 2026 16:18:56 +0000

hi👋, my name is lucas I am Brazilian and I have 11 years old (Seriously, English is a bit complicated for 11-year-olds. If there are any spelling mistakes, please just ignore them, and i talking English because this community has many people who speak English, I will always speak this way so that everyone can understand what I'm saying. Thank you for viewing this message so please help me with this and other problems, always correcting me. Thank you again, and I hope you enjoy this text.).

I passed yesterday (July 30th of 2026) developing the liquid glass (not from scrath almost more) and I passed from "backdrop-blur-[0.5rem]" to a svg not debuged obvious like a filter then making liquid glass, so I can customize these things:

depth={5}
height={20} < problem 1
radius={10} < problem 2
width={130} < problem 3
blur{0}
chromaticAberration={0}
strength={100} < that is the percentage of the force
className="¯_(ツ)_/¯"

but have a gigant problem i need to have a definition of the radius height and width and the tailwind css already do that by that I'm asking you:
how can I do this, how can I get the size and width along with the rounding of the edges?
Is there a specific command for that or not?

DEV Community: lucas lopes

It took almost a year to create a React component for the famous Liquid Glass... but it has flaws.