Générateur de gradient
Générateur de gradient CSS en ligne, créer des gradients linéaires et radiaux, ajustement visuel et copie du code
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);Qu'est-ce que le gradient CSS ?
Le gradient CSS est un effet de transition fluide entre deux ou plusieurs couleurs. Les gradients linéaires transitionnent le long d'une direction rectiligne, tandis que les gradients radiaux se propagent vers l'extérieur depuis un point central. Les gradients peuvent être utilisés pour des arrière-plans, boutons, cartes et autres éléments pour améliorer les effets visuels.
Comment utiliser
- Sélectionnez le type de gradient : Linéaire ou Radial
- Ajoutez des points de couleur et ajustez la position de chaque couleur
- Les gradients linéaires peuvent définir l'angle de direction, les gradients radiaux peuvent définir la position centrale
- Prévisualisez l'effet de gradient en temps réel
- Cliquez sur 'Copier le code' pour obtenir le code CSS
- Sélectionnez des préréglages pour appliquer rapidement des gradients courants
Utilisations courantes
- Arrière-plans web : Ajouter des arrière-plans dégradés aux pages ou sections
- Styles de boutons : Créer des boutons dégradés pour un attrait visuel
- Décoration de cartes : Ajouter des bordures ou arrière-plans dégradés aux cartes
- Couleurs de marque : Créer des gradients en utilisant les couleurs de marque
- Design UI : Générer rapidement des prototypes de gradients pour référence de design
FAQ
Q : Quelle est la différence entre gradients linéaires et radiaux ?
R : Les gradients linéaires transitionnent les couleurs le long d'une direction d'angle spécifiée ; les gradients radiaux se propagent vers l'extérieur depuis un point central, créant un effet de diffusion circulaire.
Q : Que signifie la position du point de couleur ?
R : Le pourcentage de position indique où la couleur apparaît dans le gradient, 0% est le début, 100% est la fin. Par exemple, des couleurs à 0% et 50% signifie que la première moitié transitionne de la première à la deuxième couleur.
Q : Comment créer des gradients multi-couleurs ?
R : Cliquez sur 'Ajouter une couleur' pour ajouter plus de points de couleur, chaque couleur peut avoir des positions différentes, créant des effets de gradient complexes.
Q : Comment utiliser le code CSS généré ?
R : Après copie, utilisez-le comme valeur pour la propriété background ou background-image dans votre CSS, ex. : .element { background: linear-gradient(...); }