CSS Trick

Changer un logo noir en blanc directement en CSS

Publié par Victor G.

Vous avez un logo noir ? et vous voulez le passer en blanc ?

Rien de plus simple, nous allons utiliser un filtre CSS. 

L’idéal est d’avoir un logo avec un fond transparent (au format .png ou .svg)

				
					/* utilisez la class ou l'id pour cibler votre logo */
.mon_logo {
    filter: invert(100);
}
				
			

Voici une démonstration avec les logo sur un fond coloré

Logo d’origine 

Logo d’origine sur un fond sombre

Logo avec le filtre 

Et voilà comment changer un logo noir en blanc directement en CSS !

Merci à Esther Rossi qui a inspiré cet article 😉