グラスモーフィズム生成

ガラスの質感をWebに。流行のグラスモーフィズム効果を視覚的に調整し、モダンなUIコードを生成します。

Presets

ぼかし10px

透明度25%

彩度180%

境界線の不透明度18%

背景色

CSSコード

background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border-radius: 12px;
border: 1px solid rgba(255, 255, 255, 0.18);

プレビュー

グラスモーフィズム

ガラスのような透明感とぼかし効果を作り出すモダンなデザイントレンドです。

ヒント: Safariには-webkit-backdrop-filterが必要ですが、生成されたコードに含まれています！

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

トレンディな「グラスモーフィズム」（すりガラス）効果をUIに作成します。ぼかし、透明度、彩度を調整して完璧なCSSを生成します。

1こんな時に使えます

💡トレンディなウェブサイトをデザインする

💡スタイリッシュなカードやモーダルUIを作成する

💡背景画像の上に透明なパネルが必要な場合

2特徴

リアルタイムビジュアルエディタ
CSS backdrop-filter生成
WebKit互換性プレフィックスを含む
カスタマイズ可能な背景色

3使い方

ぼかしと透明度のスライダーを調整します。
彩度と境界線の不透明度を微調整します。
カードで効果をプレビューします。
CSSコードをコピーします。

よくある質問

Q. すべてのブラウザで動作しますか？

A. ほとんどのモダンブラウザは`backdrop-filter`をサポートしています。Safariとの互換性を高めるために`-webkit-backdrop-filter`を含めています。

【公式】Pockit Chrome拡張機能が登場Chrome

プライバシー完全保証