Tailwind CSS v4 でガラスモーフィズムを実装する

ガラスモーフィズムとは

ガラスモーフィズムは、背景をぼかし、半透明の要素を重ねることで ガラスのような質感を表現するデザイン手法です。

Tailwind CSS v4 での実装

Tailwind CSS v4 では、より簡潔にガラスモーフィズムを実装できます。

基本的なクラス構成

<div class="backdrop-blur-xl bg-white/70 rounded-3xl border border-white/60">
  <!-- コンテンツ -->
</div>

主要なユーティリティクラス

• backdrop-blur-xl: 背景のぼかし効果
• bg-white/70: 70% 不透明度の白背景
• border-white/60: 60% 不透明度の白ボーダー
• rounded-3xl: 大きめの角丸

ホバーエフェクトの追加

<div class="backdrop-blur-xl bg-white/70 hover:bg-white/80
            transition-all duration-300 hover:scale-105">
  <!-- インタラクティブなコンテンツ -->
</div>

ダークモード対応

<div class="backdrop-blur-xl bg-white/70 dark:bg-gray-800/70
            border-white/60 dark:border-gray-700/60">
  <!-- ダークモード対応コンテンツ -->
</div>

まとめ

Tailwind CSS v4 のユーティリティクラスを組み合わせることで、 簡単に美しいガラスモーフィズムデザインを実装できます。