Neumorphism-generator

Generera soft UI-skuggor

Neumorphism skapar djup genom att placera ett element på en yta med samma grundfärg och sedan lägga till två motsatta skuggor: en ljus och en mörk. Resultatet får kontroller att se ut som om de är lätt upphöjda från sidan eller intryckta i den. Den här neumorphism-generatorn låter dig justera de viktigaste variablerna: bakgrundsfärg, skuggavstånd, oskärpa, intensitet, hörnradie och ytform. Förhandsgranskningen uppdateras direkt så att du ser hur små ändringar påverkar illusionen av mjukt ljus.

Den genererade CSS:en innehåller en bakgrund, en hörnradie och en dubbel box-shadow. Platt läge behåller ytfärgen jämn, medan konkavt och konvext läge lägger till en subtil gradient som antyder en fördjupning eller en rundad upphöjning. Eftersom neumorfa effekter är mycket beroende av sidans färg bör du kopiera både scenens bakgrund och komponentens stilar om du vill återskapa förhandsgranskningen exakt i ett annat projekt.

Välja avstånd, oskärpa och intensitet

Avståndet styr hur långt den ljusa och den mörka skuggan flyttas från elementet. Större avstånd får en komponent att kännas mer lyft, men kan också se orealistiska ut om oskärpan är för låg. Oskärpan mjukar upp skuggans kant, vilket är avgörande för den len soft UI-looken. Intensiteten styr opaciteten: låga värden är diskreta och lugna, medan höga värden ger en kraftigare reliefeffekt. En balanserad design använder oftast medelstor oskärpa, måttligt avstånd och tillräcklig intensitet för att visa formen utan att överskugga innehållet runtomkring.

Tillgänglighet och verklig användning i gränssnitt

Neumorphism fungerar bäst på dekorativa kort, reglage, instrumentpaneler och ikonknappar som även har tydliga etiketter. Förlita dig inte enbart på skuggor för att visa status, eftersom upphöjda ytor med låg kontrast kan vara svåra att uppfatta för många användare. Lägg till synliga fokusramar, aktiva tillstånd och en textkontrast som uppfyller tillgänglighetskraven. Testa CSS:en efter kopieringen på den faktiska sidbakgrunden och i komponentens faktiska storlek. En mjuk skugga som ser elegant ut ensam kan behöva mer kontrast eller en enklare radie i ett tätt gränssnitt.