Skip to content
🔧

Glassmorphism 生成器

ジェネレーターとデザイン · 無料オンラインツール

すりガラス効果の CSS(ブラー + 透明度)を生成。

CoderNewbie チーム

機能

12px
60%
30%
16px
20px
BG
Border
Glass
.glass {
  background: #ffffff99;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid #ffffff4d;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

backdrop-filter

完全なブラウザサポートのため標準と -webkit- プレフィックスを両方収録。

HEX アルファ

不透明度はクリーンな CSS のために HEX アルファチャンネルに自動変換。

鮮やかな背景

プレビューはカラフルなグラデーション上に配置して効果を披露。

Glassmorphism 生成器の使い方

  1. 1Configure the generator settings (colors, size, format, etc.).
  2. 2Enter any required input text or data.
  3. 3Click generate to create the output.
  4. 4Download or copy the generated result.

機能と特徴

  • 完全無料 — 登録不要、サブスクリプションなし、広告なし
  • ブラウザ上で完全に動作 — データは端末から送信されません
  • 高速・軽量 — 即座に結果を表示
  • クロスプラットフォーム — デスクトップ・タブレット・モバイル対応

よくある質問

Can I use the generated content commercially?

Yes, all generated content (QR codes, gradients, colors) is free for personal and commercial use.

What output formats are available?

QR codes can be downloaded as PNG or SVG. Gradients generate CSS code. Colors output in HEX, RGB, and HSL.

関連ツール