CSSジェネレーター（ガラス・ニューモーフィズム）

見本

背景色不透明度20% ぼかし12px 彩度140% 枠線の濃さ30% 角の丸み16px 影の濃さ15%

CSSのコード

設定とコードはブラウザの中だけで作られ、外部のサーバーには送信されません。

使い方

モダンなUIでよく使われる、ガラスモーフィズム（すりガラス調）やニューモーフィズム、影のCSSを、見ながら作れるツールです。

数値を手で書き換えて試す手間がなく、気に入った見た目になったら、そのままCSSをコピーして使えます。

ガラスモーフィズムは、半透明の背景色と backdrop-filter（背景のぼかし・彩度）、薄い枠線と影の組み合わせで作ります。Safari向けに -webkit-backdrop-filter も出力します
ニューモーフィズムは、ベースの色から明るい色と暗い色を作り、左上に明るい影・右下に暗い影を付けて、浮き出し（凸）やくぼみ（凹）を表現します

豆知識・背景知識

ガラスモーフィズムは、すりガラス越しに背景が透けて見えるような表現で、2020年ごろから広まりました。Apple の macOS Big Sur や Microsoft の Fluent Design のように、OS の画面でも使われています。

ニューモーフィズム（Neumorphism）は「新しい（New）」と「スキューモーフィズム（Skeuomorphism：現実の物に似せた表現）」を組み合わせた言葉で、背景と同じ色の素材が浮き出したり、くぼんだりしているように見せる表現です。

影を1つだけ付けるより、距離とぼかしの違う薄い影を何枚か重ねた方が、現実の光のように自然に見えます。このツールの「やわらかい影（重ねる）」は、その考え方で影を3枚重ねています。

「CSSジェネレーター（ガラス・ニューモーフィズム）」について、感想・使いにくいところ・欲しい機能などを気軽に教えてください。

まだ投稿がありません。最初の一言をお待ちしています！

お名前（任意）

評価（任意）

コメント必須

投稿された内容はこのページに公開されます。個人情報や連絡先は書かないでください。宣伝・URLを含む投稿は自動的に非表示になります。

利用にお金はかかりますか？会員登録は必要ですか？

すべて無料でお使いいただけます。会員登録やログインも必要ありません。

入力した内容はサーバーに送られていますか？

計算やツールの処理は、お使いのブラウザの中だけで行っています。入力された数値や画像がサーバーへ送られることはありません。
コメント欄に投稿された内容だけは、他の方にも読んでいただくためにサーバーへ保存されます。

スマホやタブレットでも使えますか？

iPhone・iPad・Android のブラウザに対応しています。画面の幅に合わせて表示が切り替わります。

要望やバグを見つけたときはどこへ伝えればよいですか？

「投稿する」タブからお知らせください。いただいた内容は運営で確認し、改善の参考にさせていただきます。