Comment faire un texte dégradé en CSS

Stéphane Vicent
24/08/2020
Le texte dégradé est souvent utilisé par les codeurs et les créateurs de sites internet. Les dégradés sont l'une des dernières modes en matière de conception de sites internet, et ce pour plusieurs raisons : ils sont faciles à mettre en œuvre (une fois que vous savez comment faire, ne vous inquiétez pas, c'est vraiment simple). Ils ont un effet visuel remarquable surtout si vous avez un site internet clair et léger en images.

Savoir comment créer un motif dégradé pour votre texte est un atout utile pour votre site internet.

Voici comment réaliser un Texte dégradé ou avec une image en fond avec du code CSS. Exemples :
Un beau Titre en dégradé

Remplir un texte avec un dégradé CSS :

background: linear-gradient(120deg,#379eff 0%,#1e65ff 100%);
background-clip: border-box;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;

Les étapes dans Ogygen Builder

1. il faut sélectionner le texte ou le titre
2. aller dans Advanced
3. choisir Custom CSS
4. coller le code si dessus
5. adaptez le code css du dégradé
Un super Titre avec une image en fond

Remplir un texte avec une image en fond :

background-repeat: no-repeat;
background-image: url("your-image-url.jpg");
background-size: cover;
background-clip: text;
-webkit-background-clip: text;
color: transparent;

Les étapes dans Ogygen Builder

1. il faut sélectionner le texte ou le titre
2. aller dans Advanced
3. choisir Custom CSS
4. coller le code si dessus
5. modifiez l'URL entre les crochets "" url("your-image-url.jpg"

Un générateur de dégradé CSS en ligne.
New logo 3W consultant petit

3Wconsultant Agence Digitale sur Pau

2 Avenue du Président Pierre Angot, 64000 Pau

Contact
3W-consultant à Pau et Bordeaux : WebDesign - SEO - WordPress - Marketing Digital
Certification inbound Hubspot Academy
© 3W consultant 2019 - Agence Digitale au service de votre Performance
Politique de confidentialité