ニューモーフィズム生成

ニューモーフィズム生成について

ニューモーフィズム（ソフトUI）は、要素を背景に溶け込ませるために2つの対向するシャドウ（暗いシャドウと明いハイライト）を使用し、柔らかく押し出されたプラスチックのような見た目を実現します。本ツールでは関連パラメータを微調整し、実用的なCSSを即座にコピーできます。

制御できるプロパティ

• サイズと角丸 — 要素の寸法と角の丸み。
• ベースカラー — 表面と要素が共有する背景色。
• シャドウ距離 — シャドウのオフセット距離。
• シャドウぼかし — シャドウの柔らかさ。
• 明/暗の透明度 — 各シャドウの強度を個別に制御。
• スタイル — フラット、プレスト、コンベックス。

使い方

1. ベースカラー を設定 — プレビュー面に自動適用されます。
2. サイズ と 角丸 で形状を調整。
3. シャドウ距離 と ぼかし で深さを調整。
4. 明/暗シャドウの透明度をバランス調整。
5. スタイルを選択して CSSをコピー をクリック。

よくある質問

要素が見えないのはなぜですか？ ニューモーフィズムは要素の背景が後ろの表面と同じ色である必要があります。ページの背景をここで設定した ベースカラー と一致させてください。

アクセシビリティに配慮していますか？ ソフトUIはコントラストとアクセシビリティに影響を与える可能性があります。装飾的な要素に使用し、テキストは十分に暗い色でWCAGコントラスト比を満たすようにしてください。

ホバー効果を追加できますか？ はい — ボタンでは :active 時に「プレスト」インセットシャドウに切り替えたり、:hover 時にシャドウを強めたりできます。