Liquid UI

Theme

Pick an accent, a glass and a mode, then take the CSS.

Display

Range

Guests
2

Upload

3.1 of 5 MB
Panel glassMenus, popovers, alerts and drawers use this.

Search

How it works

Liquid UI components read a few CSS variables. --liquid-accent fills buttons, sliders, progress and the tab bar's selected tab, and colours every focus ring. Switches stay iOS green unless you pass tint="var(--liquid-accent)". --liquid-panel-tint, --liquid-chrome-tint and --liquid-fill-tint set how much white or dark is mixed into the three glass materials, so Clear lets more of the page through and Frosted lets less.

Set them in :root for light mode and .dark for dark mode. Anything you don't set falls back to the defaults, so you can change only the accent.

Your pick applies to this whole site too and stays until you reset it, so you can browse every component in your theme.

On this page