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

色、不透明度、ぼかし、半径から「frosted glass」CSSブロック（半透明rgba()背景、backdrop-filterぼかし（-webkitプレフィックス付き）、柔らかい白い枠線、微妙な影）を生成します。

入力

背景色

背景の不透明度（%）

背景色と組み合わせてrgba()値になります。

ぼかし（px）

backdrop-filterとその-webkitプレフィックス版に使用されます。

Border Radius（px）

枠線の不透明度（%）

パネルの1px白い枠線の不透明度。

出力

CSS

役に立ちましたか？

このツールを使う他の方法

REST API

curl -X POST https://api.iotools.cloud/v1/tool/css-glassmorphism-generator \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -H "Content-Type: application/json" \
  -d '{
    "backgroundColor": "#ffffff",
    "backgroundOpacity": "20",
    "blurAmount": "10",
    "borderRadius": "16",
    "borderOpacity": "30"
  }'

ご自身のアカウントのキーに差し替えてください。ツールのフィールドがそのままリクエストボディになります——ラッパーはありません。

AIエージェントに依頼する

Use the IOTools `css-glassmorphism-generator` tool (CSS Glassmorphism Generator) on this input:

YOUR_INPUT_HERE

IOTools MCPサーバーに接続された任意のエージェントにこれを貼り付け、入力内容を追加してください。

埋め込みウィジェット

<iframe
  src="https://iotools.cloud/embed/css-glassmorphism-generator/"
  width="100%" height="520" frameborder="0" scrolling="no" loading="lazy"
  title="CSSグラスモーフィズムジェネレーター — iotools.cloud"
  sandbox="allow-scripts allow-forms allow-same-origin allow-downloads allow-popups allow-popups-to-escape-sandbox"
  allow="clipboard-write"
  style="width:100%;border:1px solid #e5e7eb;border-radius:12px;overflow:hidden"></iframe>
<script src="https://iotools.cloud/embed.js" async></script>

ご自身のページに貼り付けるだけ——無料、キー不要、リンクを掲載するだけです。

API/MCP 1回あたりの費用	5クレジットから
クレジットが足りませんか?	料金を見る

次の方法でも利用可能

統合ブラウザ拡張機能 VS Code拡張機能

ガイド

何ができるか

CSSグラスモーフィズムジェネレーターは、カラーピッカーと4つのスライダーをコピー&ペーストの準備ができた「frosted glass」CSSブロックに変換します。グラスモーフィズムは人気のあるUIデザイントレンドです — macOSの霜ガラスパネルで最初に普及し、その後Windows Fluent Designと数え切れないダッシュボード/カードUI — 半透明のパネルが色鮮やかなまたは忙しい背景の上に位置し、背後にあるものを暗示するのに十分なぼかしがありながら読み取り可能なままです。このルックは、複数のCSSプロパティをスタックすることから来ています：半透明のrGBA()背景、backdrop-filterぼかし、柔らかい光の枠線、丸みを帯びた角半径、および持ち上げを実現するための微妙なドロップシャドウ。

生成されるプロパティ

background: rgba(r, g, b, a);
backdrop-filter: blur(Npx);
-webkit-backdrop-filter: blur(Npx);
border: 1px solid rgba(255, 255, 255, a2);
border-radius: Npx;
box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.10);

background — 選択した色を背景不透明度スライダーと組み合わせたrgba()値。不透明度が低いほど、パネルの背後にあるものがより透けて見えます。
backdrop-filter / -webkit-backdrop-filter — エフェクトを「ガラス」に見せる実際のぼかし。両方の行は常に一緒に出力されます。下記のブラウザサポートノートを参照してください。
border — 固定の白い1pxボーダー、枠線不透明度スライダーで色付けられています。薄い明るい端はそのルックを「光を捉えるガラスペイン」として売る；代わりに固いボーダーはフラットなカードのように見えます。
border-radius — Border Radiusスライダーからの角の丸み。ガラスパネルはほぼ常に丸みがあり、シャープなコーナーではありません。
box-shadow — パネルをページから持ち上げ、ぼかしと競合しない固定の微妙なシャドウ。

ブラウザサポートノート

backdrop-filterは最新のChrome、Edge、Firefoxで十分にサポートされていますが、Safariは歴史的にぼかしをレンダリングするために-webkit-backdrop-filterプレフィックスを必要としていました — それが生成されたCSSが常に両方の宣言を含む理由です。-webkit-行を削除すると、Safariユーザーはfrosted-glassエフェクトの代わりにぼかしのない平らな半透明パネルを見る可能性があります。また注意：backdrop-filterは要素の背後にあるものをぼかすため、要素が質感または色を持つものの上に配置されている場合を除き、エフェクトは見えません — プレーンな白いページ背景はそれを示しません。

使い方

背景色を選択し、背景不透明度を設定します — これらが一緒になってパネルの半透明なrgba()フィルを形成します。
**ぼかし（px）**をドラッグしてガラスがどのくらいfrostedに見えるかを制御します。値が高いほど、パネルの背後の背景がより強くぼかされます。
Border Radiusを設定してパネルの角がどのくらい丸いかを決定します。
枠線不透明度を調整してパネルの薄い白い端をより多くまたはより少なく見えるようにします。
生成されたCSSブロックをコピーして、画像、グラデーション、または他の要素の上にある位置を指定した要素に適用します。

FAQ

なぜボーダーは常に白いのですか？ 薄い半透明のボーダーはグラスモーフィズムのほぼ普遍的な慣例です — パネル自身の色合いに関係なく、実際のガラスが端で光をどのように捉えるかを模倣しています。異なった色のボーダーが必要な場合、出力のrgba(255, 255, 255, …)を独自の色に置き換えてください。

ぼかしが要素に表示されないのはなぜですか？ backdrop-filterは要素の背後すでにレンダリングされているコンテンツだけをぼかします — 下に詳細（画像、グラデーション、または他のUI）を持つ何かが必要で、要素自体がそのコンテンツを透けて見られるように透明または半透明の背景が必要です。完全に不透明な背景はエフェクトを完全に台無しにします。

「ダークガラス」ルックに暗い背景色を使用できますか？ はい — 暗い16進数の色（例えば#000000）と低～中程度の不透明度を選択します。ボーダーは暗くぼかされた背景と対比するために白のままで、これはグラスモーフィズムのダークモード処理の標準です。

このツールは何かを保存またはアップロードしますか？ いいえ。すべての計算はあなたのブラウザ内でローカルに実行されます — あなたの色とスライダー値はあなたのデバイスを離れることはありません。

cssglassmorphismgeneratorbackdrop-filterfrosted glassweb design

ツールが気に入りましたか？広告をなくしましょう。

1回のお支払いでアカウントから広告が完全になくなります。サブスクリプションも追跡もありません。

広告を削除