CSSグラスモーフィズム生成ツール — すりガラス風エフェクト
不透明度・ぼかし(backdrop-filter)・縁の光をスライダーで調整して、すりガラス風CSSをその場で生成
話題のグラスモーフィズムを不透明度・ぼかし・角丸のスライダーで自在に調整し、そのまま貼り付けられるCSSコードを生成します。
도구를 불러오는 중…
🔒 すべてブラウザ内で処理されます。アップロードしたファイルや入力内容がサーバーに送信されることはありません。
使い方
- 不透明度・ぼかし・枠線の数値をスライダーで調整します。
- リアルタイムプレビューを見ながらCSSコードをコピーします。
よくある質問
- 古いブラウザでも表示されますか?
- 主要な最新ブラウザに対応しており、Safari向けの`-webkit-backdrop-filter`も自動で付与されます。
- backdrop-filterはスクロールが重くなりませんか?
- ぼかしの数値が大きいほどGPU負荷が増えるため、ガラスカードを複数重ねる画面では20px以下に抑えるのがおすすめです。
- Tailwind CSSのプロジェクトでも使えますか?
- 出力はプレーンなCSSなので、そのままクラスに貼り付けるか、backdrop-blurやbg-opacityといったTailwindのユーティリティ値に置き換えて使えます。