Masque sur texte en CSS

Dernière mise à jour : novembre 2022

Exemple dégradé linéaire :

<div class="ex-masque">
background-clip:text
</div>

.ex-masque{
	
display: flex;
justify-content: center;
font-size:calc(100vw /16);
background: linear-gradient(to left,#ffc712 30%, #ff4911 65%, #c42482 100%) ;
-webkit-background-clip: text;
background-clip: text;
color: transparent 
	
	}
	

Exemple avec image :

<div class="ex-masque">
background-clip:text
</div>

.ex-masque{
	
font-size: calc(100vw /16);
font-weight: 800;
display: flex;
justify-content: center;
background: url(https://res.cloudinary.com/guyomdesign/image/upload/v1515674558/h-heyerlein-199092_jb5uor.jpg) no-repeat center center;
color: transparent; /*-webkit-text-fill-color : transparent */
-webkit-background-clip: text;
background-clip: text
	
	}
	

Exemple avec image et animation CSS :

<div class="ex-masque">
background-clip:text
</div>

.ex-masque{
font-size: calc(100vw /16);
display: flex;
justify-content: center;
background: url(https://res.cloudinary.com/guyomdesign/image/upload/c_scale,w_1986/v1515674902/andy-watkins-317614_lowznf.jpg) top center;
color: transparent; 
-webkit-background-clip: text;
background-clip: text;
animation: votre-animation 10s infinite alternate
	
	}	
	
	
@keyframes votre-animation {
	
to{
	
	background-position: bottom center
	
	}
	
	}

Exemple avec animation CSS (dégradé) :

<div class="ex-masque">
background-clip:text
</div>

.ex-masque{
font-size: calc(100vw /16);
display: flex;
justify-content: center;
background: linear-gradient(to left,#ffc712 0%, #ff4911 65%, #c42482 100%) no-repeat,gold ;
background-size: 0 100%;
color: transparent; /*-webkit-text-fill-color : transparent */
-webkit-background-clip: text;
background-clip: text;
animation: anim-back 5s infinite linear alternate
	
	}
	 @keyframes anim-back{
		
	from{
		
		background-size: 100% 100%
		
		}
		
	to{
		
		background-size: 0% 100%
		
		}
	
	}
		

Exemple avec transition CSS.

Passez votre souris sur le texte ci-dessous :

<div class="ex-masque">
background-clip:text
</div>

.ex-masque {
font-size: calc(100vw /16);
background: linear-gradient(to right, #6753ea 50%, #444 50%);
display: flex;
justify-content: center;
background-position: 100% 0;
background-size: 200% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent; /*-webkit-text-fill-color : transparent */
transition: background-position .4s cubic-bezier(0,0,.5,1)
	
	}

.ex-masque5:hover{
	
	background-position: 0 0
	
	}

Source, inspiration, ressources :

3 astuces pour mettre de la texture sur du texte (EN)

Simuler background-clip :text

Il existe un polyfill pour la compatibilité.