Générateur de Dégradé CSS : Créer de beaux dégradés | Gratuit

A Choisissez les couleurs, le type, l'angle et copiez le CSS.

A Oui.

A Pour garantir que vos dégradés CSS s'alignent parfaitement avec l'identité visuelle de votre marque, utilisez les champs de saisie de couleurs personnalisées. Il suffit de coller vos codes hexadécimaux de marque spécifiques (par exemple, #RRGGBB) dans les sélecteurs de couleurs. Cela vous permet de générer des dégradés avec vos couleurs de marque exactes, maintenant une cohérence sur tous vos éléments web. Ajustez l'angle et ajoutez plus d'arrêts de couleur si nécessaire pour obtenir l'effet désiré.

A Pour concevoir un dégradé CSS multicolore, cliquez simplement sur le bouton "Ajouter une couleur" ou un indicateur similaire, généralement situé entre ou à côté des sélecteurs de couleurs existants. Cela introduira un point d'arrêt de couleur supplémentaire. Vous pourrez ensuite sélectionner une nouvelle couleur hexadécimale personnalisée pour ce point et ajuster sa position le long de la barre de dégradé afin d'obtenir une transition douce ou abrupte avec le mélange désiré de plusieurs couleurs.

A Les dégradés linéaires s'écoulent en ligne droite, horizontalement, verticalement ou en diagonale. Vous contrôlez la direction avec le curseur d'angle, par exemple en le réglant sur 90 degrés pour un fondu vertical. Les dégradés radiaux s'étendent vers l'extérieur à partir d'un point central, créant un effet circulaire ou elliptique. Vous ne pouvez pas contrôler directement la forme au-delà du cercle avec cet outil, mais vous pouvez choisir l'emplacement du centre.

A L'outil génère du CSS standard compatible avec Chrome, Firefox, Safari et Edge. Internet Explorer 9 et versions antérieures n'affichent pas les dégradés – cela représente moins de 1% du trafic mondial aujourd'hui. Pour les anciens navigateurs, ajoutez une couleur d'arrière-plan unie avant la propriété dégradée dans votre CSS. Ainsi, les utilisateurs verront une couleur plate si les dégradés ne sont pas pris en charge. Test rapide : collez votre code dans les outils de développement d'un navigateur moderne.