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.