Neumorphism-generator
Ontwerp zachte, geëxtrudeerde neumorfe UI-oppervlakken met dubbele schaduwen en kopieer de CSS.
—
De canvasachtergrond komt overeen met de elementkleur — dat is wat de zachte, geëxtrudeerde neumorfe look mogelijk maakt.
Standaard worden de lichte en donkere schaduwen afgeleid van de basiskleur. Schakel in om ze zelf in te stellen.
Over Neumorphism-generator
De Neumorphism Generator ontwerpt de zachte, uitgestulpte “soft UI”-look: een element dat lijkt te zijn uitgeperst uit — of ingedrukt in — de ondergrond erachter. Kies één basiskleur en de tool leidt de rest ervan af, want het effect werkt alleen als het element en zijn achtergrond dezelfde kleur delen en de diepte volledig ontstaat uit twee tegengestelde box-shadows.
Schuifregelaars bepalen de geometrie: grootte, border radius, de afstand van de schaduwen, hun intensiteit en vervaging. Vier vormmodi — flat, concave, convex en pressed — wisselen de interne gradient en schaduwrichting, en een lichtbronkiezer verplaatst de highlight naar elk van de vier hoeken, zodat het element bij de belichting van je ontwerp past.
Standaard worden de lichte en donkere schaduwkleuren berekend uit de basiskleur, maar een handmatige modus laat je beide zelf instellen. De gegenereerde CSS — background, radius en de dubbele box-shadow — is één klik verwijderd.
Hoe gebruik je Neumorphism-generator
- Kies de basiskleur — deze wordt toegepast op zowel het element als de ondergrond erachter.
- Kies een vorm: flat, concave, convex of pressed.
- Stel de hoek van de lichtbron in om te bepalen waar de highlight valt.
- Verfijn grootte, border radius, afstand, intensiteit en vervaging met de schuifregelaars.
- Schakel handmatige schaduwkleuren in als je de afgeleide lichte en donkere tinten wilt overschrijven.
- Kopieer de CSS en plak die op je element.