Générateur de neumorphisme (soft UI) CSS

Générateur de neumorphisme (soft UI) CSS: à quoi ça sert

Le neumorphisme, ou soft UI, donne l’impression que les boutons et les cartes sont moulés dans le fond lui-même, avec une ombre claire d’un côté et une sombre de l’autre.

Choisissez la couleur et le générateur calcule les deux ombres à partir d’elle, avec la taille, les coins, la distance, le flou, l’intensité et la direction de la lumière. Il existe quatre formes : plat, concave et convexe (avec un léger dégradé) et enfoncé (ombres internes). La page explique la précaution à prendre avec le contraste, le point faible de ce style.

Mode d’emploi

1. Choisissez la couleur de fond.
2. Réglez distance, flou, intensité et lumière.
3. Choisissez la forme et copiez le CSS.

Quand l’utiliser

• Boutons et cartes dans des tableaux de bord.
• Commandes de lecteur ou d’application.
• Détails décoratifs sur des landing pages.

Questions fréquentes

Comment fonctionne le neumorphisme ?

L’élément a la même couleur que le fond et deux ombres : une plus claire du côté d’où vient la lumière et une plus sombre du côté opposé. Cela donne une impression de relief, comme si l’élément était moulé dans le fond lui-même.

Le neumorphisme est-il accessible ?

Avec précaution. Comme l’élément a la même couleur que le fond, son bord est peu contrasté et peut disparaître pour les personnes malvoyantes. Utilisez-le pour des détails décoratifs et des cartes, garantissez le contraste du texte et des icônes et ne vous reposez pas uniquement sur le relief pour montrer qu’un élément est un bouton.

Cela fonctionne-t-il sur fond sombre ?

Oui, mais l’effet est plus subtil. Avec des couleurs très sombres ou très claires, l’ombre du côté extrême n’apparaît presque pas ; les tons moyens donnent le résultat le plus visible.

Vraiment gratuit ?

Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.

Outils similaires