Duotone Image Filter
Survol : grayscale + contrast désature le contenu, mix-blend-mode: color applique un overlay dégradé — n'importe quel visuel en duotone, pure CSS.
Vous aurez accès à la démo interactive avec un compte gratuit.
Cet effet fait partie d'Effect.Labs — 811 effets vanilla, une partie gratuite, une partie premium. Backgrounds comprend 50 effets, dont 6 gratuits. Découvrir la catégorie →
3 exemples d'usage
Comment ça marche
Au survol de .duotone-container, deux règles CSS s'activent simultanément. .duotone-content reçoit filter: grayscale(1) contrast(1.2) : tous les pixels sont convertis en niveaux de gris, puis le contraste est amplifié pour accentuer les écarts entre zones claires et sombres — c'est la matière première du duotone.
L'overlay .duotone-overlay, positionné en absolute avec inset: 0, passe de opacity: 0 à 1. Il porte mix-blend-mode: color et background: linear-gradient(135deg, #6366f1, #ec4899). Ce mode de fusion applique la teinte et la saturation du calque dégradé à la luminosité du contenu désaturé en dessous : les tons clairs prennent la couleur d'une extrémité du dégradé, les tons sombres l'autre — l'effet duotone photographique.
Les deux transitions sont indépendantes : transition: filter .6s sur .duotone-content et transition: opacity .6s sur .duotone-overlay. La propriété pointer-events: none sur l'overlay garantit qu'il ne capte jamais les événements souris. Aucun JavaScript n'est impliqué : tout repose sur la cascade CSS et la pseudo-classe :hover.
Accessibilité
- Pas de
@media (prefers-reduced-motion)dans le code — les transitionsfilteretopacityde 0,6 s continuent de s'animer même si l'OS demande une réduction du mouvement. À ajouter manuellement selon votre audience. - L'effet repose uniquement sur
:hover— aucune pseudo-classe:focusou:focus-within. Les utilisateurs au clavier ne peuvent pas déclencher le duotone dans sa forme actuelle. mix-blend-mode: colormodifie les couleurs affichées mais pas la structure sémantique : les lecteurs d'écran lisent le texte et les rôles ARIA normalement, indépendamment de l'effet.- Le container
.duotone-containerne porte niroleniaria-label— si le visuel transmet une information, ajouterrole="img" aria-label="…". - Le
.duotone-label(texte blanc sur fond sombre) satisfait WCAG AA au repos. Sous l'overlay coloré actif, vérifier le ratio de contraste avec vos propres couleurs de duotone.
Compatibilité navigateur
Nécessite filter CSS niveau 1 et mix-blend-mode — tous deux supportés dans les navigateurs modernes depuis 2016–2017. Zéro dépendance externe.
Sur Edge < 79 (sans <code>mix-blend-mode</code>), le contenu passe en niveaux de gris au survol mais sans teinte colorée — l'overlay s'affiche comme un rectangle coloré opaque. Sur IE 11, <code>filter</code> n'est pas supporté : le survol n'a aucun effet visuel. Aucune erreur JS dans les deux cas.
Le code
Structure HTML à coller dans votre page (CSS + JS disponibles avec un compte premium) :
<div class="duotone-container">
<div class="duotone-content">
<!-- Insérer ici : img, vidéo, formes CSS, SVG… -->
</div>
<div class="duotone-overlay"></div>
</div>HTML + CSS + JS complet, prêt à coller — avec des centaines d'effets premium.
Personnaliser
Options passées à l'API ou attributs data-* :
| Option / propriété | Défaut | Effet |
|---|---|---|
| background de .duotone-overlay | linear-gradient(135deg, #6366f1, #ec4899) | Les deux couleurs du duotone et l'angle du dégradé. Remplacez les hex par vos couleurs brand ; changez l'angle (0deg → 180deg) pour l'orientation. |
| mix-blend-mode sur .duotone-overlay | color | Mode de fusion. color = teinte+saturation du calque sur la luminosité en dessous. Alternatives : hue (sans saturation), multiply (assombrit), overlay (contraste fort). |
| grayscale() dans filter sur :hover | grayscale(1) | Niveau de désaturation de 0 à 1. Réduire à 0.7–0.9 pour un duotone partiel qui laisse transparaître les couleurs originales. |
| contrast() dans filter sur :hover | contrast(1.2) | Amplification du contraste. Augmenter à 1.4–1.5 pour des noirs profonds et des blancs intenses ; diminuer à 1.0 pour un effet neutre. |
| opacity de .duotone-container:hover .duotone-overlay | 1 | Intensité du ton coloré. Réduire à 0.6–0.8 pour un effet de teinte subtil qui laisse les couleurs originales transparaître en dessous. |
| transition-duration sur filter et opacity | .6s | Durée de la transition au survol. .3s = réponse vive, 1s = fondu lent. Modifier les deux valeurs pour qu'elles restent synchronisées. |
FAQ
<img>, <video>, <svg> ou bloc HTML dans .duotone-content — le filtre CSS s'applique à tout le sous-arbre rendu. Limite : les images cross-origin sans en-tête CORS peuvent ne pas être filtrées sur certains navigateurs (restriction canvas/CSS). Le contenu dans un <iframe> est inaccessible au CSS parent.:hover. Pour l'accessibilité clavier, ajoutez :focus-within en parallèle : .duotone-container:hover .duotone-content, .duotone-container:focus-within .duotone-content { filter: grayscale(1) contrast(1.2) } — et rendez le container focusable avec tabindex="0" ou assurez-vous qu'un élément interactif (lien, bouton) est à l'intérieur..duotone-overlay : background: #6366f1. Les pixels clairs prennent cette teinte, les pixels sombres restent sombres (mix-blend-mode: color préserve la luminosité). Pour un monochrome avec mix-blend-mode: multiply, le fond de l'overlay doit être blanc — les zones claires restent blanches, les zones sombres prennent la teinte.
