Neumorfisme CSS-schaduw — Code met twee lagen
Bouw visueel een CSS box-shadow op: schuifregelaars voor offset, blur, spread, kleur met dekking, inset-modus en tot vier lagen met een live voorvertoning.
Wordt volledig in uw browser verwerkt. Niets wat u hier invoert, wordt ooit geüpload.
Resultaat
Over dit hulpmiddel
Deze pagina opent de generator met het klassieke neumorfische paar al klaargezet: een lichte laag met offset −8px/−8px in bijna-wit en een donkere laag met offset 8px/8px in gedempt grijsblauw, beide 16px geblurd. Wissel tussen de twee lagen in de lagenlijst om elke kant onafhankelijk bij te stellen.
Neumorfisme (soft UI) is de reliëfstijl die rond 2020 zijn hoogtepunt bereikte: elementen lijken uit de achtergrond geëxtrudeerd in plaats van erboven te zweven. Eerlijk gezegd heeft het reële nadelen — het effect werkt alleen als de achtergrond van het element overeenkomt met de pagina-achtergrond, en de lage contrastranden kunnen de toegankelijkheid schaden — dus de meeste teams gebruiken het nu als accent, niet als volledige ontwerptaal.
Als de stijl bij je project past, is deze declaratie met twee lagen het canonieke startpunt: kopieer de CSS, stel de achtergrond van het element en de pagina in op hetzelfde zachte grijs en voeg een bijpassende border-radius toe. Alles draait lokaal in je browser.