Comment créer un gradient sur Webflow

Comment créer un gradient sur Webflow

Résumez cet article avec une IA
min
de lecture
Publié le
July 6, 2021
Mis à jour le
This is some text inside of a div block.
Et si on bossait ensemble ?
+ 350 projets réalisés
100% de satisfaction
Éligibles CII
Devis gratuit

Un gradient est un super outil pour designer votre site web : il peut apporter de la couleur et fluidifier l'expérience de l'utilisateur pendant sa visite.

Il y existe 2 types de dégradés :

  • Le Linear Gradient (dégradé linéaire)
  • Le Radial Gradient (dégradé radial)

Les deux types de gradient comportent des arrêts (ou points) le long du gradient où les couleurs passent de l'une à l'autre.

NB : Safari interprète les gradients vers une transparence comme un "noir transparent". Par conséquent, la couleur transparente paraîtra noire aux utilisateurs de Safari.

Comment créer un linear gradient (dégradé linéaire) avec Webflow ?

Un gradient linéaire crée un dégradé de couleur dans une seule direction, dirigée par l'angle. Pour ajuster l'angle du dégradé, vous pouvez au choix :

  • Cliquer et faire glisser le point sur le cadran de direction, en cliquant n'importe où sur le cadran pour définir la position de l'angle.
  • Cliquer sur les flèches pour faire pivoter l'angle par incréments de 45 degrés.
  • Saisir l'angle souhaité dans le champ de saisie
créer un gradient avec Webflow

Comment utiliser les points de dégradé (gradient stops) ?

Avec les points de dégradé, vous pouvez modifier la couleur et l'opacité du dégradé en ajoutant des couleurs dans la barre du dégradé et décider précisément où chaque couleur sera placée et le dégradé d'une couleur se fera automatiquement et dans l'ordre.

Besoin d'aide ?
Contactez un expert
Ça s'agite là-bas dedans ?

Vos questions,
nos réponses !

Quelle est la différence entre un gradient linéaire et radial dans Webflow ?

Le gradient linéaire suit une ligne droite (haut-bas, gauche-droite, diagonal), parfait pour des effets subtils et modernes. Le gradient radial part d'un centre et s'étend en cercle, idéal pour des effets de spotlight ou des designs plus organiques !

Comment créer un gradient animé sur Webflow ?

Créez votre gradient de base, puis utilisez les Interactions Webflow ! Au hover ou au scroll, changez les couleurs, l'angle ou l'opacité. Pro tip : animez subtilement l'angle de rotation pour un effet hypnotique subtil qui capte l'attention.

Peut-on utiliser plus de deux couleurs dans un gradient Webflow ?

Absolument ! Cliquez sur la barre de gradient pour ajouter des color stops illimités. Créez des arc-en-ciel, des sunsets, des effets néon... Les possibilités sont infinies ! Ajustez chaque position pour un contrôle total du rendu.

Ma question est plus complexe ?

Réserver un call avec un expert
Contactez NocodeFactory
Assez parlé,
à vous de jouer !
🥳 Estimation gratuite !
Merci ! Votre message a bien été envoyé 🥳
😿 Une erreur est survenue. Merci de recommencer
+ 350 projets
déjà réalisés