Aller au contenu principal
Guillaume Duverger Code & graphisme

Dégradé sur texte avec filtres CSS

Il existe en CSS une autre méthode pour incruster un arrière-plan sur du texte en lieu et place de la propriété background-clip, qui a longtemps souffert d'un manque de support des navigateurs, hormis Firefox. En effet, nous pouvons utiliser les modes de fusion CSS (blend modes).

Cela nécessite un peu plus de code, mais cette méthode fonctionne très bien sur la majorité des navigateurs, les modes de fusion étant supportés depuis très longtemps.

Texte dégradé blend mode
Texte dégradé background-clip



<div class="texte-degrade-mix">

<span>Texte dégradé blend mode</span>

</div>







.texte-degrade-mix {

display:grid;
color: red;
background: #fff;
font-size: 4vw;
font-weight: bold;
mix-blend-mode: multiply;

  }
  
.texte-degrade-mix>*{

grid-area:1/1

}

.texte-degrade-mix::before {

grid-area:1/1;
content: "";
background: linear-gradient(to right,#ffc712, #ff4911, #c42482) ;
pointer-events: none;
mix-blend-mode: screen;

  }