CSSグラスモーフィズム生成器
すりガラス風のUI効果をプレビューしながらCSS生成するツール。 透明度・ぼかし量・ボーダー・シャドウを細かく調整できる。
プレビュー
Glassmorphism
プレビュー
コントロール
10px
0.25
180%
0.18
16px
#ffffff
CSSコード
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
border: 1px solid rgba(255, 255, 255, 0.18);
border-radius: 16px;このツールをシェア
📖
使い方
Step 1
パラメータ調整
透明度・ぼかし・境界を調整
→
Step 2
プレビュー
リアルタイムでガラス効果を確認
→
Step 3
コピー
CSSコードをコピーして使用
✨
このツールの特徴
ぼかし調整
backdrop-filterのぼかし量を調整
背景カスタマイズ
背景画像や色を自由に変更
ボーダー・シャドウ
ガラス風の縁取りとシャドウも設定
❓
よくある質問
すりガラスのような半透明効果を持つUI設計トレンドです。
🔗関連ツール
🎨
デザインカラーコード変換器
HEX・RGB・HSLのカラーコードを相互変換。 カラーピッカーとリアルタイムプレビューで直感的に操作。
🎨
デザインカラーピッカー
カラーホイールやスライダーで直感的に色を選べるツール。 HEX・RGB・HSL形式でカラーコードを取得・コピーできる。
🎨
デザイン画像色抽出器
画像から主要な色を自動検出してカラーパレットを生成。 画像上の任意の位置をクリックして個別に色を取得することも可能。
🎯
デザイン画像平均色取得
画像全体または選択範囲の平均色を算出するツール。 デザインの配色決めやサムネイル背景色の決定に活用できる。
🌈
デザインCSSグラデーション生成器
CSSグラデーションをドラッグ操作で視覚的に作成するツール。 リニア・ラジアル・コニックの3タイプとプリセットを搭載。
🔲
デザインCSSボックスシャドウ生成器
CSSのbox-shadowをスライダーで視覚的に調整・生成するツール。 複数シャドウの重ね合わせや内側シャドウ（inset）にも対応。