Blend Mode CSS

Il y a quelques années, j’ai assisté à une conférence DotCSS à Paris où Una Kravets présentait « Editing Images in CSS ». À l’époque, la propriété mix-blend-mode était encore un peu capricieuse selon les navigateurs. Aujourd’hui, elle est parfaitement utilisable en production, et pourtant, elle reste largement sous-exploitée.

Avec mix-blend-mode, on peut facilement créer des effets visuels inspirés du design print ou des filtres Instagram, directement en CSS. Pas besoin de retouche image ni de JS. Une image, une couleur, une ligne de CSS… et tu obtiens un rendu vraiment original.

Pour te faire une idée de ce qu’il est possible de faire, je te recommande de jeter un œil au site CSSgram, une petite galerie de filtres CSS bluffants. Et si tu veux creuser un peu plus, la doc sur MDN Web Docs est très bien faite.