🔧Toolify365

Générateur de dégradés CSS (linéaire, radial, conique)

Choisis un type de dégradé, règle l'angle, ajoute ou supprime des points de couleur avec leurs positions. Aperçu en direct. Copie la déclaration CSS background en un clic.

Points de couleur

  • 0%
  • 100%

Outils similaires

Fonctionnement

Les trois types de dégradés CSS

Dégradé linéaire : les couleurs transitionnent le long d'une ligne droite selon un angle donné. 0° pointe vers le haut, 90° vers la droite (direction de lecture par défaut), 180° vers le bas. Le plus utilisé pour les arrière-plans, les boutons et les sections hero.

Dégradé radial : les couleurs transitionnent depuis un point central vers l'extérieur. La forme peut être un cercle (notre défaut) ou une ellipse. Idéal pour les effets de lumière spot, les éléments solaires ou les éléments centraux qui attirent l'attention.

Dégradé conique : les couleurs tournent autour d'un point central, comme une roue chromatique. Moins courant mais puissant pour les graphiques en camembert, les cadrans d'horloge ou les spinners décoratifs. Supporté dans les navigateurs modernes depuis 2020.

Points de couleur et système de pourcentages

Chaque point de couleur a une couleur et une position de 0% à 100%. 0% est le début du dégradé, 100% est la fin. Deux points donnent un dégradé bi-couleur lisse. Ajouter un troisième point au milieu crée un mélange tri-couleur ou une bande tranchée selon le positionnement.

Pour des transitions nettes (sans fondu), place deux points à la même position avec des couleurs différentes. Par exemple, '#000 50%, #fff 50%' crée une coupure nette noir-blanc au milieu. C'est ainsi que l'on crée des arrière-plans 'rayés'.

Performances et conseils d'accessibilité

Les dégradés se rendent nativement sans requêtes HTTP, contrairement aux images de fond. Ils s'adaptent à toute résolution sans perte de qualité. Ils sont facilement animables : transite la position via background-position ou anime les points de couleur avec des propriétés personnalisées CSS.

Accessibilité : ne place pas de texte directement sur un dégradé complexe si le contraste varie selon les zones. Utilise une superposition de couleur unie, assure-toi que la luminosité moyenne du dégradé contraste avec le texte, ou teste avec notre vérificateur de contraste. WCAG AA exige 4,5:1 pour le texte normal et 3:1 pour le grand texte.

Questions fréquentes

›Les dégradés fonctionnent-ils dans les anciens navigateurs ?

Les dégradés linéaires et radiaux fonctionnent dans tous les navigateurs modernes y compris Edge, Firefox, Chrome, Safari (depuis 2014). Les dégradés coniques nécessitent Chrome 69+, Firefox 83+, Safari 12.1+ — pour les anciens navigateurs, replie-toi sur le linéaire.

›Puis-je les utiliser dans React Native ou des applis mobiles ?

Les dégradés CSS web ne se traduisent pas directement dans React Native — utilise des bibliothèques comme `react-native-linear-gradient`. Les points de couleur se traduisent, mais la syntaxe diffère. Les UI iOS et Android utilisent des API spécifiques à chaque plateforme.

›Puis-je utiliser des couleurs nommées ?

Oui. Remplace n'importe quel code hexadécimal (ex. #ff0000) par le nom de couleur CSS (red, dodgerblue, etc.) dans le champ de texte à côté du sélecteur de couleur.

›Pourquoi mon dégradé conique a-t-il l'air bizarre ?

Les dégradés coniques tournent dans le sens des aiguilles d'une montre depuis l'angle défini. Ils ont un meilleur rendu avec plusieurs points couvrant les 360° complets. Avec seulement 2 points, ils semblent souvent incomplets.

›Comment créer un effet 'halo' ?

Utilise un dégradé radial avec un point final entièrement transparent : ex. 'radial-gradient(circle, rgba(255,200,0,0.6) 0%, transparent 70%)'.

›Puis-je animer le dégradé ?

CSS n'anime pas directement les points de couleur, mais tu peux animer background-position pour un effet de déplacement, ou utiliser des propriétés personnalisées CSS (variables) et les mettre à jour avec JavaScript.

›Pourquoi le CSS est-il si long ?

Chaque point ajoute une couleur et une position. Les dégradés avec de nombreux points produisent un CSS verbeux. Pour des résultats plus simples, limite-toi à 2 à 3 points.

›Les données quittent-elles mon navigateur ?

Non. Tout est calculé localement ; rien n'est envoyé à un serveur.

Services recommandés

Mentions sponsoring

  • NordVPN

    Sponsored

    VPN sans journaux avec plus de 6 400 serveurs dans 111 pays. Threat Protection bloque pubs, traqueurs et logiciels malveillants.

    Obtenir NordVPN →

  • Cloudways

    Sponsored

    Hébergement cloud infogéré sur DigitalOcean, AWS ou GCE — serveur prêt en quelques minutes, sans administration système.

    Essayer Cloudways →

Commentaires et questions