Boîte à Out's
Générateur de dégradés CSS - illustration de l'outil

Générateur de dégradés CSS

Créez des dégradés CSS linéaires ou radiaux, choisissez deux couleurs, le type et l'angle, puis copiez le code généré sans installation.Détails

Créez des dégradés CSS linéaires ou radiaux, choisissez deux couleurs, le type et l'angle, puis copiez le code généré sans installation.

Paramètres

Dégradés prédéfinis

Aperçu

Code CSS
background: linear-gradient(45deg, #FF6B6B, #4ECDC4);

Exemples d'utilisation

Bouton
Bordure

Utiliser un dégradé CSS

Un dégradé CSS décrit la transition entre plusieurs couleurs sans fichier image dédié. Le mode linéaire suit une direction ; le mode radial part du centre et se développe vers les bords.

Les angles CSS se mesurent depuis le haut : 0° pointe vers le haut, 90° vers la droite et 180° vers le bas. Le code exporté reprend les couleurs et le type choisis. Spécification CSS Images du W3C.

Le coût du rendu dépend du navigateur, de la surface et des animations. Un dégradé ne garantit pas un score LCP ni une cadence d’affichage. Vérifiez aussi la lisibilité du texte à chaque endroit du fond ; des bandes de couleur peuvent apparaître selon les nuances et l’écran.

À propos de Générateur de dégradés CSS

Créez des dégradés CSS linéaires ou radiaux, choisissez deux couleurs, le type et l'angle, puis copiez le code généré sans installation. Cette page fait partie des outils générateurs de Boîte À Out's, pensés pour obtenir un résultat rapide, gratuit et accessible depuis un navigateur moderne.

Méthode et transparence

Mis à jour le

Boîte À Out's publie des outils pratiques et documente ses hypothèses quand des données externes, des barèmes publics ou des règles métier sont impliqués.

Lire la méthodologieSignaler une correction

Questions Fréquentes

Quels types de dégradés puis-je créer ?

Vous pouvez créer un dégradé linéaire avec angle réglable ou un dégradé radial circulaire, entre deux couleurs.

Puis-je copier le code CSS directement ?

Oui, le code CSS du dégradé est généré automatiquement et peut être copié d'un clic pour l'utiliser dans vos projets web.

Combien de couleurs puis-je utiliser ?

Cette version utilise deux couleurs. Pour ajouter d'autres points d'arrêt, copiez le CSS généré puis complétez manuellement la fonction gradient.

Une question reste sans réponse ? Nous contacter.

Outil gratuit et fiable

L’essentiel, sans inscription.

  • 100% gratuit, sans inscription requise
  • Confidentialité prise en compte dès la conception
  • Résultats rapides directement dans l’interface
  • Interface responsive sur navigateurs modernes

Vos données : le traitement dépend de l'outil. Consultez sa notice et notre politique de confidentialité avant de saisir une information sensible.

Ces outils pourraient aussi vous intéresser

Générateur QR Code

Générateur QR Code

Créez un QR code avec logo pour un lien, le Wi-Fi, un contact, un email, un SMS, un téléphone ou un texte. Export PNG haute définition et SVG gratuit.

Générateur de palettes de couleurs

Générateur de palettes de couleurs

Composez des palettes de couleurs harmonieuses et récupérez les codes utiles pour vos interfaces et maquettes.

Générateur de favicon

Générateur de favicon

Créez un favicon à partir d'une image, d'un texte ou d'un emoji et exportez un PNG carré de 128 × 128 pixels.