これ1つでOK！ CSSでLiquid GlassやGlassmorphism、Nuemorphismを実装できる便利ツール -Aether CSS
Post on:2026年2月24日
sponsorsr
iOSにLiquid Glassが採用されてから早半年が過ぎました。
当初はiPhoneやiPadのUIに使いにくさを感じていましたが、Liquid Glassを採用しているアプリも増えた最近では逆に採用されていないアプリのUIを見るとちょっと古くさい感じがしたりします。
UIで使われるカードやボタンをLiquid Glassをはじめ、GlassmorphismやNuemorphismにするCSSをコピペで簡単に実装できるコードを生成するツールを紹介します。
Liquid Glass、Glassmorphism、Nuemorphismを簡単に実装できるツールは、こちらから。すべて無料で利用でき、ログインなど面倒なことは一切不要です。
Liquid Glassとは、2025年秋にリリースのiOS 26で採用された新しいUIです。Glassmorphismは単純な一枚のガラス板でしたが、Liquid Glassはガラスの光学的特性と流動性を組み合わせ、コンテンツやコンテキストに応じて変化する美しくて優雅なデザインです。
さっそくAether CSSを使用して、コピペしてLiquid Glassを使ってみました。ホバーすると、背景の見え方が変化します。
Liquid Glass Component
Aether CSSには現在、3つのツールが揃っています。
ツールは、左のタブで切り替えることができます。まずは、Liquid GlassのCSSを生成するツール。
Liquid GlassのCSSを生成するツール
続いて、GlassmorphismのCSSを生成するツール。
GlassmorphismのCSSを生成するツール
最後は、NuemorphismのCSSを生成するツール。
ニューモーフィズムは懐かしいですね、登場してから6年が経ちました。
NuemorphismのCSSを生成するツール
使い方は3つとも同じで、簡単です。
左パネルからプリセットを選択すると、すぐにプレビューが生成されます。右上のシャッフルアローは背景のシャッフル、アップロードは背景画像のアップロード、右端のTは文字のありなしを設定できます。
まずはプリセットを選択
「Code」を選択すると、CSSが表示されます。
元となるカードやボタンのHTMLも一緒に表示されます。
CSSコードの生成
プリセットは、Liquid Glassで12種類、Glassmorphismで12種類、Nuemorphismで8種類が用意されています。
Liquid Glassのプリセット
Liquid Glassのプリセットには、Liquid Crystal, Fluid Amber, Ice Ripple, Mercury Dropなどがあります。
Liquid Crystal, Fluid Amber, Ice Ripple, Mercury Dropの4種類を順番に表示
上部の「Adbanced」をオンにすると、ガラス表面やノイズやシャドウなどをカスタマイズできます。
高度な設定
sponsors
