CSS ニューモーフィズム生成ツール
面と光の方向を調整し、プレビューを確認して安全なプレーンテキスト CSS をコピーします。
LIVE PREVIEW
Neumorphism
使い方
使い方
- 背景色を選び、角丸、距離、ぼかし、強さを調整します。
- 光の角度を設定し、ブラウザー内でプレビューします。
- 生成した box-shadow をスタイルシートへコピーします。
対になった柔らかな影
明るい影と暗い影を同じ面に使い、基準色と光の角度から生成します。
安全なテキスト出力
出力は CSS 宣言だけです。プレビューは style 属性を使い、入力 HTML を解析・実行しません。
デザインの出発点
見え方は背景とコントラストに左右されます。実際の UI で確認し、必要な状態には別の手がかりも加えてください。
よくある質問
あわせて知りたいこと
HTML も生成しますか？
いいえ。box-shadow CSS 宣言だけを生成します。
入力は送信されますか？
いいえ。計算とプレビューはブラウザー内で行います。
なぜ影が2つありますか？
明暗の影を組み合わせて立体的な見た目を作るためです。