Générateur de neumorphisme
Concevez des surfaces d'interface neumorphiques douces et extrudées avec double ombre et copiez le CSS.
-
L'arrière-plan du canevas correspond à la couleur de l'élément : c'est ce qui produit l'effet neumorphique doux et extrudé.
Par défaut, les ombres claires et foncées sont dérivées de la couleur de base. Activez pour les définir vous-même.
À propos de Générateur de neumorphisme
Le générateur de Neumorphisme crée l'aspect doux et extrudé du « soft UI »: un élément qui semble sortir de, ou s'enfoncer dans, la surface derrière lui. Choisissez une seule couleur de base et l'outil dérive tout le reste, car l'effet ne fonctionne que lorsque l'élément et son arrière-plan partagent la même couleur et que la profondeur provient entièrement de deux ombres portées opposées.
Des curseurs contrôlent la géométrie: taille, rayon de bordure, distance des ombres, leur intensité et leur flou. Quatre modes de forme (plat, concave, convexe et enfoncé) modifient le dégradé interne et la direction des ombres, et un sélecteur de source lumineuse déplace le reflet vers l'un des quatre coins pour correspondre à l'éclairage de votre design.
Par défaut, les couleurs d'ombre claire et foncée sont calculées à partir de la couleur de base, mais un mode manuel vous permet de les définir vous-même. Le CSS généré (background, radius et les deux box-shadow) n'est qu'à un clic.
Comment utiliser Générateur de neumorphisme
- Choisissez la couleur de base : elle s'applique à la fois à l'élément et au fond derrière lui.
- Choisissez une forme: plate, concave, convexe ou enfoncée.
- Réglez le coin de la source lumineuse pour contrôler où tombe le reflet.
- Ajustez taille, rayon de bordure, distance, intensité et flou avec les curseurs.
- Activez les couleurs d'ombre manuelles si vous voulez remplacer les tons clair et foncé dérivés.
- Copiez le CSS et collez-le sur votre élément.