Ombre CSS néomorphique — Code à deux couches
Créez du code CSS box-shadow visuellement : des curseurs pour le décalage, le flou, l'étalement, la couleur avec opacité, le mode inset et jusqu'à quatre couches avec un aperçu en direct.
Entièrement traité dans votre navigateur — rien de ce que vous saisissez ici n'est jamais téléchargé.
Résultat
À propos de cet outil
Cette page ouvre le générateur avec la paire néomorphique classique déjà construite : une couche claire décalée de −8px/−8px en blanc cassé et une couche sombre décalée de 8px/8px dans un gris-bleu discret, toutes deux floutées à 16px. Passez d'une couche à l'autre dans la liste pour ajuster chaque côté indépendamment.
Le néomorphisme (soft UI) est le style en relief qui a connu son apogée vers 2020 : les éléments semblent extrudés de l'arrière-plan plutôt que de flotter au-dessus. Honnêtement, cela comporte de vrais compromis — l'effet ne fonctionne que lorsque l'arrière-plan de l'élément correspond à celui de la page, et les bords à faible contraste peuvent nuire à l'accessibilité — la plupart des équipes l'utilisent donc désormais comme un accent, pas comme un langage de design complet.
Si le style convient à votre projet, cette déclaration à deux couches est le point de départ canonique : copiez le CSS, définissez l'arrière-plan de l'élément et de la page sur le même gris doux, et ajoutez un border-radius assorti. Tout s'exécute localement dans votre navigateur.