ニューモーフィズムジェネレーター
二重の影で柔らかく浮き出たニューモーフィズム風UIをデザインし、CSSをコピーできます。
プレビュー
CSS
—
キャンバスの背景が要素の色と一致します — これが柔らかく浮き出たニューモーフィズムの見た目を生み出します。
ベースカラー
要素と背景の両方に使用されます。
形状
光源
200px
50px
20px
15%
60px
デフォルトでは明暗の影はベースカラーから自動生成されます。有効にすると自分で設定できます。
ニューモーフィズムジェネレーターについて
Neumorphism Generatorは、背景から押し出されたように、あるいは押し込まれたように見える柔らかな「ソフトUI」の見た目をデザインします。ベースカラーを1色選ぶだけで、あとはツールがすべて自動で導き出します。これは、この効果が要素とその背景が同じ色を共有し、奥行きが完全に2つの相反するbox-shadowから生まれる場合にのみ機能するためです。
スライダーでサイズ、角丸、影の距離、強度、ぼかしといった形状を制御できます。flat、concave、convex、pressedという4つの形状モードは内部のグラデーションと影の向きを切り替え、光源ピッカーはハイライトを4つの角のどこにでも動かせるので、デザインの光の当たり方に要素を合わせられます。
デフォルトでは、明るい影と暗い影の色はベースカラーから自動計算されますが、手動モードでは両方を自分で設定できます。生成されたCSS(background、radius、そして2つのbox-shadow)はワンクリックでコピーできます。
ニューモーフィズムジェネレーターの使い方
- ベースカラーを選びます。これは要素とその背後のキャンバスの両方に適用されます。
- 形状を選びます。flat、concave、convex、pressedのいずれかです。
- 光源の角を設定して、ハイライトの位置を制御します。
- サイズ、角丸、距離、強度、ぼかしをスライダーで調整します。
- 導出された明るい色と暗い色を上書きしたい場合は、手動シャドウカラーを有効にします。
- CSSをコピーして要素に貼り付けます。
よくある質問
ニューモーフィズムは、要素が背景の面と同じ背景色を共有していることに依存します。同じベースカラーのコンテナ上に要素を配置してください。白地やコントラストの強い背景の上では、2つの影がただの光として見えてしまい、奥行きには見えません。
flatは表面をそのまま平らに保ちます。convexは外側に膨らんで見えるグラデーションを加えます。concaveは内側にへこんで見えます。pressedは影を完全に反転させ、要素が表面に沈み込んだように見せます。これはボタンが押された状態の定番表現です。
対角にある2つのbox-shadowによるものです。1つは影を模した暗い影、もう1つはハイライトを模した明るい影で、両方ともベースカラーから導き出されます。distanceで位置をずらし、blurで柔らかくし、intensityでベースカラーからどれだけ離れた色にするかを制御します。
慎重に使ってください。このスタイルは本質的にコントラストが低いため、はっきり読めるテキスト、明確なフォーカス状態、インタラクティブ要素の十分なコントラスト比と組み合わせるようにし、できる限りソフトな見た目は装飾的な面に限定するのがおすすめです。
はい、無料で完全にブラウザ内で動作します。アカウント登録なしで、好きなだけ調整・プレビュー・CSSのコピーができます。
人気の検索
ニューモーフィズム CSS ジェネレーター
ソフトUI シャドウ ジェネレーター
ニューモーフィック box-shadow CSS
ニューモーフィズム box-shadow ジェネレーター
CSS ソフトシャドウ ジェネレーター
ニューモーフィズム デザイン ツール
inset シャドウ CSS ジェネレーター
CSS 二重 box-shadow
お困りですか？
このツールで問題が見つかりましたか？チームにお知らせください。