Générateur de neumorphisme
Faites des boutons et des cartes qui semblent pressés hors de la page ou dans la page.
- Vos données ne quittent jamais votre appareil
- 100 % gratuit
- Sans inscription
- Fonctionne hors ligne après la première charge
Comment faire un effet neumorphisme
- Choisissez une couleur de base et une forme.
- Choisissez d'où vient la lumière et accordez la distance, l'intensité et le flou.
- Copiez le CSS (et définissez la même couleur sur l'arrière-plan parent).
À propos : Générateur de neumorphisme
Créer des CSS soft-UI (neumorphisme).
Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.
Idéal pour
- Boutons et bascules d'interface utilisateur
- Cartes de tableau de bord et widgets
- Lecteurs de musique et interfaces Smart Home
Conseil : Réglez l'arrière-plan parent sur la même couleur — C'est ce qui rend la forme extrudée.
Questions fréquentes
Comment est fait le neumorphisme ?
Deux ombres sur un élément de la même couleur que son fond : une plus foncée loin de la lumière et une plus claire vers elle. La pression utilise des ombres encastrées; concave et convexe ajoutent un dégradé subtil.
Le neumorphisme est-il accessible ?
Son faible contraste peut rendre les boutons difficiles à voir. Utilisez-le pour la décoration et ajoutez du texte clair, des icônes ou des bordures pour les contrôles importants.
Quelles couleurs fonctionnent le mieux ?
Mi-lumière, couleurs à faible saturation — gris doux, menthes et beiges. Des bases très sombres ou très lumineuses laissent peu de place aux ombres claires et sombres.
Pourquoi a-t-il l'air plat sur mon site?
L'effet a besoin de l'élément pour s'asseoir sur un fond de la même couleur. Sur un fond différent les ombres claires et sombres ne se fondent pas.
Puis-je l'utiliser sur les boutons et les entrées?
Oui. Le CSS n'est qu'un arrière-plan et une ombre de boîte, il fonctionne donc aussi bien sur les boutons, les cartes et les champs de formulaire.