リアルタイム視覚ステージ＆ライティング
凸面（Extruded / 浮き出し）クリックして状態を切り替え
145°
#e0e5ec
要素サイズ（幅/高さ）240px
角丸半径（border-radius）32px
浮遊距離・オフセット（Distance）12px
ぼかしの柔らかさ（Blur）24px
拡散半径（Spread）0px
陰影コントラスト強度（Intensity）15%
光の入射角（Incident Angle）145°
145°
仮想光源スタジオ光源アイコンをドラッグして照射角を360度調整
色彩調和（色相連動シャドウ）背景色相と色温度に応じた調和シャドウカラーを自動合成し、濁りを防ぎます
CSSカスタムプロパティ（変数）デザインシステムに統合しやすいCSS変数形式（--nm-*）で出力します
エッジアクセントリム微細な1pxの外周境界ラインを付加し、低コントラスト環境での輪郭視認性を向上させます
極座標ベクトル: dx=10px, dy=7px | 145°O(1) 物理演算
/* Neumorphic Soft UI Element */
.soft-ui-surface {
width: 240px;
height: 240px;
border-radius: 32px;
background: #e0e5ec;
box-shadow: 10px 7px 24px #b5c3d5, -10px -7px 24px #e5e9ee;
transition: box-shadow 0.2s cubic-bezier(0.4, 0, 0.2, 1), transform 0.15s ease;
}
/* Interactive Elevate & Depress States */
.soft-ui-surface:hover {
box-shadow: 13px 9px 30px #b5c3d5, -13px -9px 30px #e5e9ee;
transform: translateY(-2px);
}
.soft-ui-surface:active {
box-shadow: inset 10px 7px 24px #b5c3d5, inset -10px -7px 24px #e5e9ee;
transform: translateY(0);
}出力フォーマット: 標準 CSS | 569 バイト本番導入準備完了
WCAG AA 非テキストコントラスト
1.41:1
低コントラスト画面向けにアクセントリムの有効化を推奨
光源ベクトル幾何座標
145° / 12px
対向するハイライトとシャドウの極座標配置
ガウス半影（ぼかし拡散）
24px (2:1 自動連動)
リアルな立体深度を生み出す光学拡散係数
ブラウザ完結型ローカル処理
すべての陰影および光学物理計算はブラウザの内部メモリで高速実行され、瞬時にプレビューへ反映されます。
サーバー送信ゼロ・完全プライバシー
すべての設定値やカラーデータは端末内でのみ処理され、外部サーバーへの通信は一切発生しません。
本番対応のクリーンコード出力
CSS、Tailwind、React、SCSSなど各種フレームワークに最適化された本番用コードを即座に出力します。
