ニューモフィズム（ソフトUI）CSSジェネレーター

ニューモフィズム（ソフトUI）CSSジェネレーター: 用途

ニューモフィズム（ソフトUI）は、片側に明るい影、反対側に暗い影を付けて、ボタンやカードが背景そのものから成形されたように見せます。

色を選ぶと、ジェネレーターがそこから2つの影を計算します。サイズ、角丸、距離、ぼかし、強さ、光の方向を調整できます。形は4種類：フラット、凹と凸（控えめなグラデーション付き）、押し込み（内側の影）です。ページでは、このスタイルの弱点であるコントラストへの配慮についても説明します。

使い方

1. 背景色を選びます。
2. 距離、ぼかし、強さ、光を調整します。
3. 形を選んでCSSをコピーします。

使うタイミング

• パネルのボタンとカード。
• プレーヤーやアプリのコントロール。
• ランディングページの装飾。

よくある質問

ニューモフィズムはどのような仕組みですか？

要素は背景と同じ色で、2つの影を持ちます。光が当たる側には明るい影、反対側には暗い影です。これにより、要素が背景そのものから成形されたような立体感が出ます。

ニューモフィズムはアクセシブルですか？

注意が必要です。要素が背景と同じ色なので、境界のコントラストが低く、視力が弱い人には見えなくなることがあります。装飾的な部分やカードに使い、テキストやアイコンのコントラストを確保し、立体感だけでボタンであることを示すのは避けてください。

暗い背景でも使えますか？

使えますが、効果はより控えめになります。非常に暗い色や非常に明るい色では、端の側の影がほとんど見えません。中間の色合いが最もはっきり見えます。

本当に無料？

はい、100%無料です。登録不要、サブスクなし、利用制限なし。すべてのツール：Tools123は無料です。

関連ツール