Générateur de néomorphisme CSS

Qu'est-ce que Générateur de néomorphisme CSS ?

Le générateur de néomorphisme CSS est un outil visuel gratuit pour créer le rendu soft-UI (néomorphisme), où les éléments semblent ressortir de la surface ou y être enfoncés grâce à deux ombres décalées de la même teinte. Il est conçu pour les designers d'interfaces et les développeurs front-end qui veulent cette profondeur subtile et tactile sans régler à la main des box-shadow appariées. Définissez une couleur de base avec le sélecteur ou un champ hexadécimal, basculez la Forme entre Plate, Concave et Convexe, et ajustez la Distance (de combien les ombres se décalent), l'Intensité (la force du contraste clair/foncé), le Flou (douceur) et le Rayon (arrondi des angles). L'outil dérive de votre couleur de base un reflet plus clair et une ombre plus foncée et les combine – en superposant éventuellement un dégradé subtil pour les formes concave et convexe – en une seule règle CSS, affichée en direct sur un fond assorti et restituée sous forme de code copiable.

Comment utiliser Générateur de néomorphisme CSS

1. Choisissez la couleur de base de la surface avec l'échantillon ou en saisissant une valeur hexadécimale telle que #e0e5ec.
2. Sélectionnez une Forme : Plate pour un panneau en relief, Concave pour un creux enfoncé ou Convexe pour une bosse bombée.
3. Réglez la Distance pour éloigner les ombres claire et foncée et obtenir une extrusion plus profonde.
4. Ajustez l'Intensité pour rendre le contraste reflet/ombre plus fort ou plus subtil.
5. Réglez le Flou pour des bords plus doux ou plus nets et le Rayon pour arrondir les angles.
6. Vérifiez l'aperçu en direct, puis copiez le CSS de néomorphisme généré dans votre feuille de style.

Exemples

couleur #e0e5ec, forme Plate, distance 12, intensité 15, flou 24, rayon 20

border-radius: 20px;
background: #e0e5ec;
box-shadow: 12px 12px 24px #bec3c9, -12px -12px 24px #e5e9ef;

couleur #e0e5ec, forme Concave, distance 8, intensité 15, flou 16, rayon 16

border-radius: 16px;
background: linear-gradient(145deg, #d0d5db, #e2e7ed);
box-shadow: 8px 8px 16px #bec3c9, -8px -8px 16px #e5e9ef;

couleur #3a3f47, forme Convexe, distance 6, intensité 20, flou 12, rayon 12

border-radius: 12px;
background: linear-gradient(145deg, #484c54, #363b42);
box-shadow: 6px 6px 12px #2e3239, -6px -6px 12px #61656c;

Questions fréquentes

Qu'est-ce que le néomorphisme ?

Le néomorphisme (ou soft UI) est un style où les éléments semblent ressortir d'une surface monochrome ou y être enfoncés, à l'aide de deux box-shadow décalées de la même teinte : une plus claire en haut à gauche et une plus foncée en bas à droite. Cet outil dérive les deux ombres de votre couleur de base afin qu'elles s'accordent toujours à la surface.

Quelle est la différence entre Plate, Concave et Convexe ?

Plate conserve la surface dans une seule couleur unie, de sorte que l'élément paraît surélevé au-dessus du fond. Concave ajoute un dégradé subtil qui s'assombrit vers le haut à gauche, donnant l'impression d'un creux. Convexe inverse le dégradé pour que le centre paraisse bombé et soulevé. Les ombres claire et foncée restent identiques ; seul le remplissage de la surface change.

Comment fonctionnent la Distance, l'Intensité, le Flou et le Rayon ?

La Distance est le décalage en pixels des deux ombres : des valeurs plus grandes éloignent l'élément de la surface. L'Intensité contrôle à quel point les deux couleurs d'ombre sont plus claires et plus foncées que la couleur de base. Le Flou adoucit les bords de l'ombre et le Rayon arrondit les angles. Le CSS se met à jour en direct dès que vous modifiez l'un d'eux.

Quelle couleur dois-je utiliser pour le fond ?

Le néomorphisme ne s'affiche correctement que lorsque l'élément repose sur une surface de la même couleur de base – appliquez la même couleur à l'élément parent ou au fond de la page. L'aperçu utilise votre couleur de base comme arrière-plan afin que vous puissiez juger précisément l'effet avant de copier.

Mes données sont-elles envoyées quelque part ?

Non. Le générateur s'exécute entièrement dans votre navigateur avec JavaScript : votre couleur et vos réglages ne sont jamais envoyés à un serveur, il fonctionne donc en toute confidentialité et même hors ligne une fois la page chargée.