Glassmorphism UI Kit
すりガラス効果を活用したモダンUIコンポーネント集。
半透明・ぼかし・光の表現で洗練されたインターフェースを実現します。
ログインフォーム
アカウントにサインイン
メールアドレスとパスワードを入力してください
Y
田中 悠太
UIデザイナー / フロントエンドエンジニア
1,284
投稿
24.5K
フォロワー
891
フォロー中
料金プラン
Free
¥0
個人利用・永久無料
- プロジェクト3件まで
- 基本コンポーネント
- コミュニティサポート
- 月間 1GB ストレージ
人気
Pro
¥2,980
月額（税込）
- プロジェクト無制限
- 全コンポーネント利用可
- 優先サポート
- 100GB ストレージ
- チームコラボレーション
Enterprise
要相談
カスタムプラン
- 全 Pro 機能を含む
- 専任サポートマネージャー
- SLA 保証
- 無制限ストレージ
- カスタムインテグレーション
- SSO / SAML 対応
メディア & ウィジェット
🎵
夜を駆ける
YOASOBI
東京都 渋谷区
2月23日（日）
18°
くもり時々晴れ
62%
湿度
3.2m/s
風速
5
UV指数
月
20°
火
17°
水
12°
木
15°
金
19°
通知 & アラート
保存が完了しました
ストレージ残量が少なくなっています
接続エラーが発生しました
メンテナンスのお知らせ
CSSプロパティ エクスプローラー
パラメータ調整
プレビューカード
スライダーを動かして、リアルタイムでガラスモーフィズムの効果を調整できます。
CSSコード スニペット
/* ============================================ Glassmorphism Effect - CSS ============================================ */ .glass-card { /* Frosted glass background */ background: rgba(255, 255, 255, 0.12); /* Blur effect - the core of glassmorphism */ backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); /* Subtle border for glass edge */ border: 1px solid rgba(255, 255, 255, 0.25); /* Rounded corners */ border-radius: 24px; /* Depth with shadow */ box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2); } /* Hover interaction */ .glass-card:hover { transform: translateY(-4px) scale(1.01); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.3); }