Générateur de dégradé CSS
Choisissez deux couleurs, optez pour un dégradé linéaire ou radial, et ajustez l’angle pour voir un aperçu en direct. Le code CSS correspondant est généré instantanément et prêt à être copié dans votre feuille de style.
background: linear-gradient(90deg, #ff9a00, #60acfc);Comment ça marche
Choisissez vos deux couleurs avec les sélecteurs, optez pour « linéaire » ou « radial », et pour un dégradé linéaire, faites glisser le curseur d’angle. L’aperçu et le code CSS ci-dessous se mettent à jour instantanément à chaque changement.
Astuce
Un angle de 90deg va de gauche à droite, 180deg de haut en bas, et 0deg de bas en haut — essayez le curseur pour voir comment la direction du dégradé change.
Quelle est la différence entre linéaire et radial ?
Un dégradé linéaire évolue le long d’une ligne droite selon l’angle défini. Un dégradé radial s’étend en cercle depuis le centre vers l’extérieur, quel que soit l’angle.
Plus d'outils dans cette catégorie
Calculateur d'exposition
Trouvez des expositions photo équivalentes entre ouverture, vitesse d'obturation et ISO.
Calculateur de ratio d’aspect
Redimensionnez une image ou une vidéo proportionnellement et trouvez son ratio simplifié.
Vérificateur de contraste
Vérifiez si une couleur de premier plan et d'arrière-plan respectent les normes de contraste WCAG.
Générateur de palette de couleurs
Transformez n'importe quelle couleur de base en palettes complémentaires, analogues et triadiques.
Convertisseur de format de couleur
Convertissez instantanément n'importe quelle couleur entre HEX, RVB, HSL et CMJN, avec copie en un clic pour chaque format.
Générateur d'échelle typographique
Générez un ensemble harmonieux de tailles de police à partir d'une taille de base et d'un ratio d'échelle, prêt à copier sous forme de propriétés personnalisées CSS.