すりガラス風カード生成Glassmorphism Generator
ぼかし・透明度・境界線をスライダーで調整し、すりガラス風カードのCSSを生成。Generate glassmorphism card CSS by adjusting blur, opacity, and border.
お気に入りについて About favorites
この端末のブラウザにのみ保存され、サーバーには送信されません。 Saved on this device only—never sent to our servers.
使い方・ユースケース How to Use & Use Cases
背景のぼかし具合・カードの不透明度・境界線の透明度・角丸をスライダーで調整すると、カラフルな背景の上にすりガラス風カードがリアルタイムでプレビューされます。生成された`backdrop-filter`を含むCSSをコピーしてそのまま使えます。 Adjust blur, card opacity, border opacity, and corner radius with sliders to see a live glass-card preview over a colorful background. Copy the generated CSS, including backdrop-filter, and use it as-is.
ログインフォームやモーダル、通知カードにトレンドのすりガラス質感を取り入れたいとき、背景の写真やグラデーションを活かしたヒーローセクションのカードUIを作りたいときに使えます。 Useful for adding a trendy frosted-glass look to login forms, modals, or notification cards, or building hero-section card UIs that let a background photo or gradient show through.
よくある質問FAQ
backdrop-filterに対応していないブラウザはありますか？Are there browsers that don't support backdrop-filter?
主要なモダンブラウザ（Chrome・Edge・Safari・Firefox 103以降）で対応しています。古いFirefoxでは表示されない場合があるため、背景色のフォールバックを別途指定することをおすすめします。All major modern browsers (Chrome, Edge, Safari, Firefox 103+) support it. Older Firefox versions may not render it, so consider adding a solid background-color fallback.
背景に画像や写真を使う場合の注意点は？Any tips for using a photo background?
すりガラス効果は背景に十分なコントラストや模様がある方が視覚的に映えます。単色の背景では効果が分かりにくい場合があります。The frosted effect looks best over a background with enough contrast or texture. It may be hard to notice over a flat solid color.
Safariでも正しく表示されますか？Does it render correctly in Safari?
表示されます。生成されたCSSには`-webkit-backdrop-filter`も含まれているため、Safariでも同様に表示されます。Yes. The generated CSS includes -webkit-backdrop-filter, so it renders the same way in Safari.
ページを閉じれば、端末内のデータは自動的に消去されます。契約書や顧客資料など、慎重に扱うデータも安心してご利用ください。When you close the page, data on your device is cleared automatically. Safe for sensitive files such as contracts and client documents.
