Premium
Liquid Glass
Translucent Figma components with soft blur, luminous edges, and layered glass surfaces.
HorizonX UI/UXCollection
Liquid Glass CSS & Glassmorphism UI
Liquid glass CSS and glassmorphism references: translucent cards, radio controls, a checkbox, widgets, a consent component and a landing page. Use glass to separate a floating panel from a colorful surface. This collection mixes design references with coded controls, so choose the format as well as the look.
- 9 designs
- Made by the HorizonX team
- Read the guide
HorizonX UI/UX
What is inside
Liquid glass CSS and glassmorphism references: translucent cards, radio controls, a checkbox, widgets, a consent component and a landing page.
When to use it
Use glass to separate a floating panel from a colorful surface. This collection mixes design references with coded controls, so choose the format as well as the look.
Customize and integrate
Adapt the surface tint, border and text contrast to your background. Open each product to check its format; a Figma reference and a CSS control need different workflows.
Before publishing
Test text on bright and dark content behind the panel. Provide a readable opaque fallback if blur is unavailable, and avoid stacking many expensive blurred surfaces.
Is liquid glass the same as glassmorphism?
Both use translucent surface styling, but the catalog includes several visual interpretations rather than one uniform implementation.
Is everything here CSS?
No. The selection includes UI designs and a Figma-tagged landing page alongside CSS controls and a coded consent component.
How do I keep glass readable?
Use a restrained tint, clear borders and enough text contrast. Test the surface against the actual content that will sit behind it.
Keep exploring
Related collections
Find the next design for your project
Browse every design in the HorizonX catalog, from UI kits and templates to textures, shaders and mockups.