Neumorphism-generator
Designa mjuka, upphöjda neumorfiska UI-ytor med dubbla skuggor och kopiera CSS-koden.
—
Bakgrunden matchar elementets färg – det är det som ger den mjuka, upphöjda neumorfiska looken.
Som standard härleds ljusa och mörka skuggor från basfärgen. Aktivera för att ange dem själv.
Om Neumorphism-generator
Neumorphism-generatorn skapar den mjuka, upphöjda "soft UI"-stilen: ett element som ser ut att vara pressat ut ur — eller in i — ytan bakom det. Välj en basfärg så härleder verktyget allt annat, eftersom effekten bara fungerar när elementet och dess bakgrund delar samma färg och djupet kommer helt från två motstående box-shadows.
Skjutreglage styr geometrin: storlek, hörnradie, skuggornas avstånd, deras intensitet och oskärpa. Fyra formlägen — flat, concave, convex och pressed — byter den interna gradienten och skuggriktningen, och en ljuskällsväljare flyttar highlighten till valfritt av de fyra hörnen så att elementet matchar belysningen i din design.
Som standard beräknas de ljusa och mörka skuggfärgerna från basfärgen, men ett manuellt läge låter dig ställa in båda själv. Den genererade CSS-koden — background, radius och de dubbla box-shadow-värdena — är ett klick bort.
Så använder du Neumorphism-generator
- Välj basfärgen — den appliceras på både elementet och ytan bakom det.
- Välj en form: flat, concave, convex eller pressed.
- Ställ in ljuskällans hörn för att styra var highlighten hamnar.
- Justera storlek, hörnradie, avstånd, intensitet och oskärpa med skjutreglagen.
- Aktivera manuella skuggfärger om du vill åsidosätta de härledda ljusa och mörka tonerna.
- Kopiera CSS-koden och klistra in den på ditt element.