Design Tools
グラスモーフィズムジェネレーター
CSSのぼかしと透明度でフロストガラス効果を作成
ガラス効果
グラスモーフィズム効果はこのように見えます。
Button 1
Button 2
ガラス効果
10px
25%
180%
16px
ボーダー
1px
18%
影
32px
37%
背景
.glass {
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 16px;
border: 1px solid rgba(255, 255, 255, 0.18);
box-shadow: 0 8px 32px 0 rgba(31, 38, 135, 0.37);
}ブラウザサポート
backdrop-filterプロパティは最新のブラウザでサポートされています。古いブラウザにはフォールバックを提供してください。
なぜグラスモーフィズムジェネレーターを使うべきですか？
- ✓100%無料 - 隠れた費用やプレミアム機能はありません
- ✓登録不要 - アカウント作成なしですぐに使えます
- ✓プライバシー重視 - すべての処理はブラウザで行われます。データはサーバーに送信されません
- ✓超高速 - サーバー遅延なしで即座に結果を確認できます
使い方
- 上の入力エリアにテキストを入力または貼り付けてください
- ツールが自動的に入力を処理します
- 結果をコピーするかファイルとしてダウンロードしてください
機能
- ✓Adjustable blur amount
- ✓Transparency control
- ✓Border and shadow options
- ✓Background image preview
- ✓CSS and Tailwind output
- ✓Browser compatibility info
よくある質問
Is glassmorphism supported in all browsers?
The backdrop-filter property is supported in most modern browsers, but may require prefixes for Safari.