技術リファレンス&アーキテクチャガイド

Neumorphism (Soft UI) CSS Box Shadow & Surface Maker — リファレンスガイド

Create extruded, recessed, flat, and concave neumorphic UI components with light and dark specular shadow calculations.

主要パラメータ&設定項目

Base Color Inputstring

Configures base color input during client-side neumorphism (soft ui) css box shadow & surface maker computation.

初期値: #e0e5ec
Shapestring

Configures shape during client-side neumorphism (soft ui) css box shadow & surface maker computation.

初期値: extruded
Distancenumber

Configures distance during client-side neumorphism (soft ui) css box shadow & surface maker computation.

初期値: 9
Blurnumber

Configures blur during client-side neumorphism (soft ui) css box shadow & surface maker computation.

初期値: 18

プロの活用テクニック&推奨設定

Extruded (Convex)

Simulates an outward bulging or convex surface. A gentle diagonal linear gradient flows from light highlight on the illuminated edge to shadow shade on the opposing edge. Ideal for unpressed buttons and dials.

Concave (Dish)

Inverts the gradient direction so the surface curves inward like a hollow dish or saucer. The rim facing the light source drops into shadow, while the inner well catches light reflections. Perfect for analog jog wheels.

Recessed (Inset)

Applies dual inset box-shadows to simulate a sunken chamber carved into the material plane. Essential for depressed active button states, search inputs, sliders tracks, and switch wells.

よくあるトラブルと解決策

Unexpected output or validation warning in Neumorphism (Soft UI) CSS Box Shadow & Surface Maker

Verify that your base color input matches the expected string format. Load a built-in sample preset to compare structural formatting.

Exported neumorphism css generator result differs across target environments

Check the shape setting in Neumorphism (Soft UI) CSS Box Shadow & Surface Maker to ensure encoding, precision, or specification version matches your target runtime.

関連するおすすめ開発ツール

すべてのツール →