Liquid Glass UI Demo

透明感と触覚が融合する、
新しいWebデザイン

Appleの「Liquid Glass」にインスパイアされたUIデザイン。光の屈折、動的なハイライト、触覚的なインタラクションをWebで体験してみてください。

体験するギャラリーを見る

Features

リキッドグラスの3つの特徴

従来のGlassmorphismから進化した、動的で触覚的なUIデザインの要素を紹介します。

💠

動的な光の屈折

背景のコンテンツがリアルタイムに屈折・反射し、ユーザーの操作に応じて光沢が変化します。カードにマウスを乗せてみてください。

✨

スペキュラハイライト

ガラスの上部に光のグラデーションを配置し、本物のガラスが持つ光沢感と厚みを表現しています。

🎯

触覚的インタラクション

ホバー時の浮き上がり、ボタンの押し込み感など、「触りたくなる」マイクロインタラクションを実装。

Showcase

デザインギャラリー

リキッドグラスを活用したUIコンポーネントのサンプルです。

🌐 Dashboard UI

ダッシュボード

データ可視化パネルにリキッドグラスを適用。背景の動的なグラデーションが透けて見え、情報の階層が自然に伝わります。

📱 Mobile App

モバイルアプリUI

ナビゲーションバーとカードにLiquid Glass効果を適用したモバイルUI。

🎨 Portfolio

ポートフォリオサイト

作品を引き立てるミニマルなガラスフレーム。コンテンツが主役のデザイン。

Pricing

料金プラン

リキッドグラスで作る料金表UIのサンプルです。ホバーで触覚的な反応を体験できます。

Free

¥0 / 月

個人プロジェクト向け

基本コンポーネント
3ページまで
コミュニティサポート

リキッドグラスを、あなたのサイトに。

この記事で紹介したCSSコードを使えば、今すぐリキッドグラスデザインを始められます。まずは1つのカードから試してみてください。

ブログ記事を読む

透明感と触覚が融合する、新しいWebデザイン