デザインツール

CSSグラスモーフィズム - すりガラス風カード生成

color、opacity、blur、outline を調整し、backdrop-filter を使った frosted glass card の CSS を preview しながら生成できます。半透明 panel や nav layer の調整向けで、処理はすべてブラウザ内です。

クイック切替→CSSニューモーフィズム

CSSGlassmorphismbackdrop-filter

クイック切替:CSSニューモーフィズム CSS背景パターン

このツールをお気に入りに

お気に入りの保存方法がまだ選ばれていません。

クイック操作

デザインツールに戻るすべてのツールを見る

このツールの URL をコピーするか、対応端末ではシステムの共有シートを開けます。

利用シーン

半透明の card background を作る
backdrop-filter のパラメータを調整する
panel や nav layer の style を書き出す

使い方

色と opacity を調整する
blur と outline を設定する
preview して CSS をコピーする

入出力サンプル

パラメーター

ぼかし 18px / アルファ値 0.3

出力

backdrop-filter: blur(18px)

FAQ

どの CSS feature に依存しますか？

主に backdrop-filter に依存します。未対応 browser 向けには solid または不透明背景の fallback を用意してください。

他の glassmorphism tool と何が違いますか？

こちらは card の色、opacity、blur、outline をまとめて調整する構成です。もう一方は共通 preset を素早く書き出す用途に寄っています。

ツール

関連ツール

近い用途の翻訳済みツールへ続けて進めます。

CSSニューモーフィズム

CSSニューモーフィズム - ソフトUI向けシャドウ生成

利用可能

background color、distance、blur から neumorphic な inset / outset shadow CSS を生成できます。button、card、light 系 soft UI control の raised / pressed 表現確認に向いています。

CSS Neumorphism Shadow

ツールを開く

CSS背景パターン

CSS背景パターン - ドット、ストライプ、グリッド

利用可能

dots、stripes、checkers、grids などの pure CSS background pattern を生成できます。色とサイズを調整し、装飾 background、placeholder texture、見た目の試作向け CSS をコピーできます。

CSS Background Pattern

ツールを開く