CSSニューモルフィズムジェネレーター

CSSニューモルフィズムジェネレーター

2つの対向するボックスシャドウを手で調整せずに、ソフトで浮き上がった「ネウモルフィック」UI要素を作成できます。基本色を選択し、形状（平ら、concave、convex、または押しこまれた）を選び、距離、強度、ぼかし、および光角度のスライダーをドラッグして、生成されたCSSをプロジェクトにコピーしてください。

使用方法

1. 背景色を選択してください。要素とその周囲のキャンバスに同じ色を使用します。これがネウモルフィックの効果を実現する理由です。
2. 形状を選択： フラット, concave （わずかな凹み） convex （わずかな浮き上がり）または インセット （押しこまれた）
3. 調整 距離 と 光角度 シャドウの方向を設定します。
4. 調整 強度 と ぼかし 表面が自然に見えるようにします。
5. CSSをコピーするか、または HTML + CSSを表示 をタップして貼り付け用のスニペットに変換します。

機能

• ライブプレビュー — すべてのスライダーの変更がリアルタイムでレンダリングされた要素を更新します。
• 5つの内蔵プリセット — ソフトライト、ストロングライト、ソフトダーク、ストロングダーク、および押しこまれたものです。
• 自動生成されたシャドウカラー — 明るいと暗いシャドウは、ベースカラーから数学的に明るくまたは暗く調整され、効果が常に一致します。
• concaveおよびconvexのグラデーション — このモードでは、ツールは要素の表面にマッチする線形グラデーションを生成します。
• インセット（押しこまれた）モード — クリック時に「押しこまれた」ように見えるボタンに使用します。
• 光角度制御 — 虚擬の光源を0°から360°まで回転させます。
• コピー用CSS — ボックスシャドウ宣言と表面の背景を含む、きれいな出力です。