Neumorphisme CSS Shadow - Code à deux couches
Créez visuellement du code CSS box-shadow : curseurs pour le décalage, le flou, la répartition, la couleur avec opacité, le mode incrustation et jusqu'à quatre calques avec un aperçu en direct.
Résultat
Cette page ouvre le générateur avec la paire neumorphique classique déjà construite : un calque clair décalé de −8px/−8px en presque blanc et un calque sombre décalé de 8px/8px dans un gris-bleu atténué, tous deux flous de 16px. Basculez entre les deux calques dans la liste des calques pour régler chaque côté indépendamment.
Le neumorphisme (soft UI) est le style de relief qui a culminé vers 2020 : les éléments semblent extrudés de l'arrière-plan plutôt que flottant au-dessus de celui-ci. Honnêtement, cela implique de réels compromis : l'effet ne fonctionne que lorsque l'arrière-plan de l'élément correspond à l'arrière-plan de la page, et les bords à faible contraste peuvent nuire à l'accessibilité – de sorte que la plupart des équipes l'utilisent désormais comme un accent, et non comme un langage de conception complet.
Si le style correspond à votre projet, cette déclaration à deux couches est le point de départ canonique : copiez le CSS, définissez l'élément et l'arrière-plan de la page sur le même gris doux et ajoutez un rayon de bordure correspondant. Tout s'exécute localement dans votre navigateur.