🧊 グラスモーフィズムカードジェネレーター

背景のぼかし、不透明度、彩度、境界線、影をスライダーで調整しながら、半透明のガラス風カードをリアルタイムでプレビューできるツールです。WebデザイナーやフロントエンドエンジニアがグラスモーフィズムUIをすばやく試作し、そのままCSSコードを活用したいときに便利です。処理はすべてブラウザ内で完結し、サーバーへの送信は行われません。

使い方

1. 6種類のグラデーション背景プリセットから1つを選びます。
2. ぼかし、背景の不透明度、彩度、角丸、枠線の太さ・不透明度、パディングのスライダーを調整します。
3. カラーピッカーでカードのティントカラーを選び、影のオン/オフを切り替えます。
4. プレビューが好みの見た目になったら、下部の「CSSをコピー」ボタンでコードを取得します。

よくある質問

生成したCSSはどのブラウザで動きますか？

backdrop-filterに対応した最新のChrome、Edge、Safari、Firefoxで動作します。Safari向けに-webkit-backdrop-filterも自動で付与されます。

ガラスっぽく見えず、ただぼやけて見えます。

backdrop-filterはカードの『背後』にあるものをぼかす効果なので、カードの後ろに色鮮やかな背景や画像がないとガラス感が出にくいです。

生成したCSSを自分のプロジェクトに使ってもいいですか？

はい、表記義務なしで自由にコピーしてプロジェクトに使用できます。