Générateur CSS de neumorphisme
Générez du CSS soft UI (neumorphisme) : ombres claire et sombre dérivées de votre couleur de base, formes plate, concave, convexe ou enfoncée, quatre directions de lumière.
Réglages du neumorphisme
Les ombres claire et sombre sont dérivées de la couleur de base en augmentant et en diminuant sa luminosité OKLCH selon l’intensité. Utilisez la même couleur pour le fond de la page.
Aperçu
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Outils Connexes
Voir ToutQu'est-ce que Générateur de neumorphisme ?
Produit le rendu soft UI où un élément semble sortir de la page (ou s'y enfoncer). Il dérive une ombre plus claire et une ombre plus sombre de votre couleur de base et les combine en deux box-shadow opposés, avec des remplissages en dégradé facultatifs pour les surfaces concaves et convexes.
Comment utiliser Générateur de neumorphisme
- Saisissez la Couleur de base (utilisez la même couleur pour le fond de votre page).
- Choisissez la Forme : Plat, Concave, Convexe ou Enfoncé.
- Choisissez la direction de la Source lumineuse.
- Ajustez Distance, Flou, Intensité, Rayon et Taille de l'aperçu.
- Copiez le code CSS.
Exemple
Base #e0e0e0, flat, light from top left, distance 20px, blur 60px, intensity 0.15, radius 50px
border-radius: 50px; background: #e0e0e0; box-shadow: 20px 20px 60px #b0b0b0, -20px -20px 60px #ffffff;
Quand utiliser Générateur de neumorphisme
Utilisez-le pour des tableaux de bord ludiques, des commandes d'applications de domotique ou de musique et des pièces de portfolio. Le neumorphisme a par nature un faible contraste : ne vous y fiez pas seul pour des boutons ou champs de formulaire importants ; ajoutez des libellés clairs, des icônes ou un anneau de focus pour l'accessibilité.
Comment fonctionne Générateur de neumorphisme
Les couleurs d'ombre claire et sombre sont calculées en OKLCH en augmentant et en diminuant la luminosité de la couleur de base selon l'intensité, en conservant la teinte et la chroma (ramenées dans la gamme sRGB) : cela fonctionne donc aussi pour des bases colorées et sombres. L'ombre sombre est décalée à l'opposé de la source lumineuse selon la distance et l'ombre claire vers elle, avec le même flou. Enfoncé utilise deux ombres inset. Concave et convexe ajoutent un linear-gradient dont l'angle suit la direction de la lumière, avec des couleurs plus claires et plus sombres d'un tiers de l'intensité.
Cas d'utilisation courants
- Interrupteurs et boutons-poussoirs doux
- Cartes de tableau de bord sur un fond assorti
- État enfoncé pour les commandes actives
- Interfaces de calculatrice ou de lecteur de musique
- Soft UI en mode sombre avec une couleur de base sombre
Questions Fréquentes
Pourquoi le fond de la page doit-il correspondre à la couleur de base ?
L'illusion vient du fait que l'élément a la même couleur que son environnement, seules les ombres révélant sa forme. Un fond différent brise l'effet.
Fonctionne-t-il sur les couleurs sombres ?
Oui. Comme la luminosité est décalée en OKLCH plutôt que multipliée, une base sombre obtient quand même une ombre de lumière visiblement plus claire.
Quelle différence entre concave et convexe ?
Convexe est plus clair du côté tourné vers la lumière (il bombe vers l'extérieur) ; concave y est plus sombre (il semble creusé).