ニューモルファシズム生成器
無料でオンラインで利用可能 ニューモルファシズム生成器 インストール不要のツール
ニューモーフィズムジェネレーターについて
ニューモーフィズムジェネレーターは、ニューモーフィズム（ソフト UI）と呼ばれる柔らかく押し出されたような見た目を作ります。フラット、プレスト、コンベックスの形状を選び、背景色の上で距離、ぼかし、角丸を調整すると、対応する box-shadow の CSS がリアルタイムで作られます。プレビューで要素の見た目を正確に確認でき、コピー可能なコードブロックにスタイルが保持されます。すべてブラウザ内で動作します。
使い方
1. 形状を選びます：フラット、プレスト、コンベックス 2. インターフェイスに合わせて背景色を設定します 3. 距離、ぼかし、角丸のスライダーを調整します 4. リアルタイムに更新されるプレビューを確認します 5. コピーをクリックして生成された CSS を取得します
より良い結果のためのヒント
要素と背景が同じ色のときにニューモーフィズムは最もよく機能し、影が滑らかな 3D 効果に溶け込みます。ページに近い背景色を選びましょう。フラットは浮き出た見た目、プレストは要素を内側にへこませ、コンベックスはフラットの影の上に微妙なグラデーションを加えて丸みを出します。ぼかしを小さくすると輪郭がくっきり、大きくするとより柔らかくなります。角丸を大きくすると角が丸まり親しみやすい形になります。
▶ニューモーフィズムとは何ですか？
柔らかく同系色の影を使って、要素が背景から押し出されたりへこんだりして見えるデザイン手法です。ジェネレーターは 2 つの box-shadow と共有の背景色からその見た目を作ります。
▶各形状の違いは何ですか？
フラットは外向きの影で浮き上がらせます。プレストは内向きの影で要素をへこませます。コンベックスはフラットの影に薄明グラデーションを重ねて丸みを出します。
▶なぜ背景色を合わせるのですか？
効果は要素と周囲が同じ色であることに依存します。色が合うと二重の影が別の浮遊ボックスではなく滑らかな 3D 表面に見えます。
▶距離とぼかしは何を制御しますか？
距離は影を要素から遠ざけ、ぼかしは影を柔らかくします。小さく詰めた値はくっきりと、大きなぼかしはより柔らかく拡散した表面をもたらします。
▶CSS をコピーできますか？
はい。コピーボタンが生成された background、border-radius、box-shadow のルールをクリップボードに書き込み、スタイルシートやスタイルブロックに貼り付けられます。
このツールがあなたに役立ったなら、私にコーヒーをご馳走することをお勧めします。
私にコーヒーを買ってください。