Liquid Glass UI Library

LiquidStyle

A web library for creating smooth, reactive liquid glass UI elements with a modern iOS-inspired look.

Add the following lines to the HTML <head> and before the closing </body> tag:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/techlxrd/LiquidStyle/liquidstyle.css">

<script src="https://cdn.jsdelivr.net/gh/techlxrd/LiquidStyle/liquidstyle.js"></script>

Apply the liquid-glass class to any element to enable the effect:

<div class="liquid-glass">

  LiquidStyle glass surface

</div>

Works on buttons, cards, sections, and everything.

drop_fill

Liquid Glass

LiquidStyle uses SVG displacement filters to create a polished liquid glass effect.

bolt_fill

Lightweight

The library stays minimal so it fits cleanly into existing projects without extra clutter.

wand_stars

Easy to Use

LiquidStyle keeps the setup simple so the effect can be added with just a few lines.

arrow_up_arrow_down

Reactive Motion

The glass surface reacts to scrolling and background movement for a dynamic visual effect.

Built for fast integration

LiquidStyle is designed for quick drop-in use. Add the CDN links, apply the class, and the glass effect is ready without extra setup.

Simple, clean, open source.

exclamationmark_triangle_fill

Compatibility Note

LiquidStyle is compatible with Chromium based browsers only.