グラスモーフィズム カードジェネレーター
ぼかしと透明度を調整して、すりガラス風カードの CSS をその場でコピー
背景のぼかし、透明度、彩度、ボーダー、シャドウをスライダーで調整しながら、すりガラスのような質感のカードをリアルタイムプレビューで確認できるツールです。Web デザイナーやフロントエンドエンジニアが、グラスモーフィズム（Glassmorphism）スタイルの UI コンポーネントをすばやく試して、CSS をそのままコピーして使いたいときに便利です。調整もプレビューもすべてブラウザ内で完結し、サーバーへ送信されるデータはありません。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 6種類の背景グラデーションのプリセットから1つを選びます。
- ぼかし、背景の不透明度、彩度、角丸、ボーダーの太さと不透明度、内側の余白のスライダーを調整します。
- カラーピッカーでカードのティント（色味）を指定し、シャドウを使うかどうかをチェックします。
- プレビューがイメージどおりになったら、下部の CSS をコピーボタンでそのまま取得します。
よくある質問
- 生成された CSS はどのブラウザで正しく表示されますか？
- backdrop-filter に対応した最新の Chrome、Edge、Safari、Firefox で動作します。Safari 向けに -webkit-backdrop-filter の接頭辞付きプロパティも一緒に生成されます。
- カードがぼやけるだけで、ガラスらしさが感じられません。
- backdrop-filter はカードの「背後」にあるものをぼかして透かす効果です。カードの後ろに色や画像のある華やかな背景がないと、ガラスらしい質感は出ません。
- 生成した CSS を実際のプロジェクトでそのまま使ってもよいですか？
- はい。ライセンス表記なしで、コピーした CSS を自由にプロジェクトへ組み込んでいただけます。