Générateur de neumorphisme CSS
Guide
Générateur de neumorphisme CSS
Créez des éléments « néumorphiques » doux et épaissis sans avoir à ajuster manuellement deux ombres de boîte opposées. Choisissez une couleur de base, sélectionnez une forme (plate, concave, convexe ou enfoncée), déplacez les curseurs pour la distance, l'intensité, le flou et l'angle de lumière, puis copiez le CSS généré directement dans votre projet.
Comment utiliser
- Choisissez une couleur de fond. La même couleur est utilisée pour l'élément et le canvas environnant — c'est ce qui permet au néumorphisme de fonctionner.
- Sélectionnez une forme : Plat, Concave (petite dépression), Convexe (petite élévation), ou Inset (enfoncé).
- Modifier Distance et Angle de lumière pour définir la direction de l'ombre.
- Ajuster Intensité et Flou jusqu'à ce que la surface semble naturelle.
- Copier le CSS, ou activer Afficher le HTML + CSS pour obtenir un extrait prêt à coller.
Caractéristiques
- Prévisualisation en temps réel — chaque modification de curseur met à jour instantanément l'élément affiché.
- Cinq préreconfigurations intégrées — Soft Light, Strong Light, Soft Dark, Strong Dark et Pressed.
- Couleurs d'ombres automatiquement dérivées — les ombres claires et sombres sont mathématiquement allégées ou assombries à partir de votre couleur de base afin que l'effet soit toujours cohérent.
- Gradients concave et convexe — l'outil génère un gradient linéaire correspondant à la surface de l'élément dans ces modes.
- Mode encastré (enfoncé) — pour des boutons qui semblent « enfonnés » lors du clic.
- Contrôle de l'angle de lumière — tournez la source de lumière virtuelle de 0° à 360°.
- CSS prêt à copier — sortie propre incluant la déclaration de l'ombre de boîte et le fond de surface.
FAQ
-
Qu'est-ce que le néumorphisme ?
Le néumorphisme (aussi appelé interface douce) est un style visuel où les éléments semblent s'élever du fond ou s'enfoncer dans le fond. Il est réalisé avec deux ombres de boîte de flou égal — une ombre plus claire sur le côté exposé à la lumière et une ombre plus sombre sur l'autre côté — toutes deux affichées sur un fond de la même couleur que l'élément lui-même.
-
Pourquoi l'élément doit-il partager la couleur de fond ?
Le néumorphisme repose sur l'illusion que la forme fait partie de la même surface que le fond. Si l'élément utilise une couleur différente, il ne semble plus s'extraire du fond, mais plutôt comme un pavé plat avec deux ombres aléatoires, ce qui détruit l'effet.
-
Les interfaces néumorphiques sont-elles accessibles ?
Elles présentent des compromis connus en matière d'accessibilité. Puisque tous les éléments partagent la même couleur de fond, le contraste par rapport au texte et aux autres composants UI est souvent très faible, ce qui peut violer les exigences de contraste WCAG et confondre les utilisateurs de magnificateurs écran. Utilisez le néumorphisme pour des surfaces décoratives et gardez les éléments interactifs critiques à fort contraste.
-
Comment l'angle de lumière est-il lié aux décalages des ombres ?
Les deux décalages des ombres sont dérivés de l'angle de lumière à l'aide de la trigonométrie de base : offsetX = cos(angle) × distance, offsetY = sin(angle) × distance. L'ombre opposée est placée aux décalages négatifs afin que les deux côtés (lumière et ombre) soient situés sur des bords opposés, ce qui correspond à la manière dont une source lumineuse réelle projette ces ombres.
Installez nos extensions
Ajoutez des outils IO à votre navigateur préféré pour un accès instantané et une recherche plus rapide
恵 Le Tableau de Bord Est Arrivé !
Tableau de Bord est une façon amusante de suivre vos jeux, toutes les données sont stockées dans votre navigateur. D'autres fonctionnalités arrivent bientôt !
Outils essentiels
Tout voir Nouveautés
Tout voirMise à jour: Notre dernier outil was added on Mai 30, 2026
Impliquez-vous
Aidez-nous à continuer à fournir des outils gratuits et précieux
