CSSで実装されたLiquid Glassの美しいUI要素やコンポーネントをコピペで使えるUIキット -Liquid Glass UI Kit
Post on:2026年4月22日
iOSにLiquid Glassが採用されてから早半年が過ぎました。
慣れない当初は使いにくさを感じていましたが、Liquid Glassを採用しているアプリが増え、最近では逆にLiquid Glassを採用していないアプリのUIを見るとちょっと古くさい感じがしたりします。
WebサイトやスマホアプリのUIで使われるカード、ボタン、ナビゲーション、タブ、アコーディオン、モーダル、フォーム、テーブルなどのUI要素やコンポーネントをLiquid Glassの美しいデザインにしたUI Kitを紹介します。

Liquid Glass UI Kitは、CSS Guidelines(管理しやすく、拡張性のあるCSSを書くためのガイドライン)に準拠し、BEMメソッドで実装されたUIキットです。
ライセンスは独自で、商用プロジェクトでも無料で利用できます。複製、変更、配布、サブライセンスなども無償とのことです。
See the Pen
Pure CSS Glassmorphism Liquid Glass UI kit by coliss (@coliss)
on CodePen.
では、Liquid Glass UI KitのUI要素をいくつか見てましょう。
完全なデザイントークンシステムで、アクセシブルな15種類以上のUIコンポーネント、12種類のアニメーションが楽しめます。

Liquid Glass UI Kit: ライトモード
ライトモード・ダークモードの両方をサポートしています。
この記事では、ライトモードを主体に掲載しています。

Liquid Glass UI Kit: ダークモード
まずは、スマホアプリでもよく見かけるLiquid Glassのカード。ホバーすると、カードが浮き上がります。

Liquid Glassのカード
ボタンももちろんLiquid Glassです。プライマリだけでなく、アクセントなど異なるカラーもLiquid Glassになっています。

Liquid Glassのボタン
ボタン、ナビゲーション、タブ、ドロップダウンなどがあり、フォームも美しいLiquid Glassが適用されています。

Liquid Glassのフォーム
Liquid Glassのアコーディオンは、クリック・タップで開閉します。

Liquid Glassのアコーディオン
テーブルもLiquid Glassにすると、美しさとともに見やすさもアップしますね。

Liquid Glassのデータテーブル
モーダルは、モーダルウインドウだけでなく、開閉ボタンもLiquid Glassにデザインされています。

Liquid Glassのモーダル
最後は、Liquidアニメーション。すべてピュアCSSで実装されており、Liquid Glassの美しいデザインがゆらゆらアニメーションします。

Liquidアニメーション
sponsors













