Handytool
DéveloppeurGratuitExécuté localement

Générateur de gradient CSS

Construisez les gradients CSS linéaires, radiaux et coniques — faites glisser les arrêts, choisissez les couleurs, copiez le CSS.

Aperçu
CSS
background: linear-gradient(135deg, #B7FF3E 0%, #0a0a0a 100%);
Type
Préréglages

Ajoutez jusqu'à six arrêts de couleur, faites glisser le curseur de position et copiez le CSS.

À propos de Générateur de gradient CSS

Le générateur de gradient CSS de Handytool construit des gradients linéaires, radiaux et coniques avec jusqu'à six arrêts de couleur. Faites glisser la position d'un arrêt, modifiez sa couleur, changez le type de gradient et l'aperçu en direct et la déclaration CSS se mettent à jour instantanément. Commencez par l'un des présets intégrés — Lime Swiss, Sunset, Sky, Aurora — ou concevez le vôtre à partir de zéro.

Fonctionnalités de Générateur de gradient CSS

  • 01

    Linéaire, radial et conique

    Linéaire est le gradient d'arrière-plan quotidien ; radial est excellent pour les reflets et les vignetages ; conique est parfait pour les graphiques circulaires, les roues chromatiques et les arrière-plans rotatifs.

  • 02

    Jusqu'à six arrêts de couleur

    Ajoutez et supprimez les arrêts, définissez la position de chacun avec un curseur et choisissez sa couleur via le sélecteur de couleur du système ou une valeur hexadécimale. Les arrêts sont automatiquement réordonnés par position.

  • 03

    Déclaration CSS copiable

    La sortie est une déclaration background: ... complète que vous pouvez coller directement dans une feuille de styles, un composant stylisé ou une classe de valeur arbitraire Tailwind.

FAQ Générateur de gradient CSS

Quelle est la différence entre linéaire, radial et conique ?
Les gradients linéaires s'exécutent en ligne droite à un angle donné ; les gradients radiaux rayonnent à partir d'un centre ; les gradients coniques balayent autour d'un point comme une main d'horloge. Chacun convient à un effet visuel différent.
Combien d'arrêts de couleur dois-je utiliser ?
Deux arrêts c'est le gradient classique de deux couleurs. Trois ou quatre vous permettent de créer des transitions réalistes (coucher de soleil, aurore). Plus de six c'est tendance à être bruyant — c'est pourquoi ce générateur plafonne à six.
Puis-je utiliser ceci pour les arrière-plans dans un modèle d'e-mail ?
La plupart des clients de messagerie ne supportent toujours pas de manière fiable les gradients CSS modernes — fournissez une couleur de fallback solide en plus du gradient d'arrière-plan si vous copiez ceci dans un modèle d'e-mail.
L'aperçu est-il précis au pixel ?
Oui — l'aperçu est rendu par le moteur de dégradé natif du navigateur, donc ce que vous voyez est exactement ce que votre CSS produira.

Outils liés

Développeur →

Explorez d'autres outils

Tous les outils →