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

類似ツール：CSS とデザイン

コードを見栄えのよい共有用画像に変換。複数のテーマに対応

線形・放射状・円錐グラデーションを視覚的にデザインし、CSS コードをすぐにコピー

影の効果をインタラクティブに調整し、CSS の出力をリアルタイムでプレビュー

?

まだコメントはありません。最初のコメントを書いてみましょう！

不透明度、ぼかし、彩度、枠線などのパラメータを調整して、すりガラス（グラスモーフィズム）カードの効果をリアルタイムでプレビューし、backdrop-filter を含む CSS コードをコピーできます。

左側の「エフェクト設定」には 6 つのスライダー（不透明度、ぼかし強度、彩度、枠線の不透明度、角丸、シャドウ強度）とガラスの色を選ぶカラーピッカーがあり、すべて右側のプレビューカードに即時反映されます。
「不透明度」は 10～25%、「ぼかし強度」は 5～15px がおすすめです。この 2 つのパラメータがすりガラスの質感に最も影響します。
彩度を 180% まで上げるとガラスの背後の色が鮮やかになります。枠線の不透明度を調整すると、ガラスカードにほのかなハイライトの縁を付けられます。
下の 6 つの背景スウォッチ（Purple／Ocean／Sunset など）をクリックしてプレビューの背景を切り替え、さまざまな背景での見え方を確認できます。
「CSS をコピー」をクリックすると完全な CSS が取得できます。backdrop-filter と -webkit-backdrop-filter（Safari 対応）が自動で含まれているので、そのままプロジェクトに貼り付けて使えます。

グラスモーフィズム効果はどのように実現していますか？

backdrop-filter: blur() で背景をぼかし、半透明の background-color と繊細な枠線を組み合わせてガラスの質感を作ります。

生成された CSS はすべてのブラウザで動作しますか？

Chrome、Edge、Safari では良好に動作します。Firefox では試験的機能の有効化が必要です。念のため -webkit- プレフィックスを付けることをおすすめします。

効果をリアルタイムでプレビューできますか？

はい。スライダーや色を調整するたびに、プレビュー領域が即座に更新されます。