グラスモーフィズムカードをAIで作るCSSプロンプト作例

このインタラクティブなデモンストレーションは、CSSのbackdrop-filterプロパティを使用してグラスモーフィズム効果を作成する力を示しています。グラスモーフィックカードは、調整可能なぼかし、明るさ、彩度フィルターを持つすりガラスのような外観を特徴としています。

主な機能：

• マウスの動きに反応する動的バックドロップフィルター
• リアルタイムのフィルター調整コントロール
• 現在のフィルター値を表示するライブCSSコード表示
• スムーズなトランジションとホバー効果
• -webkit-backdrop-filterフォールバックによるクロスブラウザ互換性

カードの上でマウスを動かすと、カーソルの位置に基づいてフィルターが動的に変化します。下のスライダーを使用して各フィルターパラメータを手動で調整し、リアルタイムでガラス効果にどのように影響するかを観察してください。