Comment utiliser les gradients sur Webflow

Après s'être tous bien moqués d'Instagram et de son dégradé en 2016, difficile aujourd'hui d'envisager le design sans en utiliser tant les marques et les utilisateurs en sont friands. Vous vous demandez comment créer un gradient sur Webflow ? Suivez la guide !

Avant de laisser libre cours à votre créativité, gardez en tête qu'il y a plusieurs manières d'appliquer des gradients (dégradé) sur votre site web :

• En arrière-plan,
• Sur un bouton,
• Sur les bordures d'un bouton,
• Sur du texte

Envoyez-nous un petit mot si l'on en a oublié un pour que nous puissions compléter l'article !

Comment appliquer un dégradé en arrière-plan sur Webflow

Qu'il s'agisse d'une simple div, ou d'une section, d'un container, la méthode est la même pour appliquer un gradient sur des backgrounds.

• Positionnez votre div/section/... sur le plan de travail ;
• Dans le menu de droite, cliquez sur le + à côté de “image & gradient” ;
• En fonction du gradient que vous souhaitez utiliser, cliquez sur Linear Gradient ou Radial Gradient ;
• Configurez votre gradient.

Appliquer un dégradé sur un bouton

Un bouton est presque une div comme les autres (surtout sous Webflow), la méthode est donc la même que pour un arrière-plan. 👆

Attention tout de même

En appliquant un dégradé sur le fond d'un bouton, Webflow n'est ensuite plus capable de calculer le ratio de contraste entre le texte et le fond (il se fonde sur la couleur "pleine" d'arrière-plan uniquement). Passez donc un peu de temps à vérifier que ce dégradé n'affectera pas l'expérience de vos utilisateurs.

Appliquer un dégradé sur les bordures d'un bouton

Vous souhaitez ajouter un quelque chose en plus à vos boutons sur Webflow ? Vous devriez tenter d'y ajouter un dégradé de couleurs sur les bordures.

Ça se corse pour ce style, mais rien d'insurmontable avec ce tuto !

• Ajoutez un Link Block ;
• Configurez tout de suite la taille de police, sa couleur et retirez l'underline (sauf si vous souhaitez que le texte du bouton soit souligné)
• Configurez le gradient en arrière-plan de cet élément ;
• Donnez-lui un padding de 2px ;
• Ajoutez ensuite un Text Block à l’intérieur ;
• Appliquez un arrière-plan de la même couleur que la section ;
• Et voilà !

‍Pour rester le plus cohérent possible dans l'utilisation des couleurs et des éléments sur votre site, pensez à créer un component avec ce bouton une fois que vous en êtes satisfait pour pouvoir le réutiliser partout sur le site.

Ajouter dégradé sur un texte sur Webflow

Vous souhaitez mettre encore plus de couleurs dans votre vie en ajoutant des gradients directement sur du texte sans ligne de code ? (ça marche sur le texte et/ou les titres)

• Ajoutez un Text Block ;
• Configurez le gradient en arrière-plan (comme dans la première étape) ;
• Cliquez sur “Clipping” et click sur “Clip background to text”

Vous voilà roi/reine du CSS sans avoir à ajouter la moindre ligne de code. À nouveau, envoyez-nous un petit mot si les éléments ci-dessus ne répondent pas à 100 % à votre besoin ou pour nous dire que vous avez compris comment ajouter un gradient sur Webflow !