🧰 UtlKit

Générateur de Dégradé CSS

Créez de beaux dégradés CSS. Linéaire et radial avec prévisualisation en direct.

Arrêts de Couleur
%
%
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);
🐛

Signaler un Problème

Vous avez trouvé un bug ou avez une suggestion ? Aidez-nous à améliorer cet outil.

📊 Résumé des Données (rempli automatiquement)

Outil: gradient-generator · /tools/gradient-generator/

type: linear

angle: 135

stops: [object Object],[object Object]

radialShape: ellipse

Qu'est-ce que cet outil ?

Le Générateur de Dégradé CSS crée des arrière-plans en dégradé linéaire et radial avec aperçu visuel. Il génère du code CSS prêt pour la production pour les fonctions linear-gradient() et radial-gradient(). Il prend en charge plusieurs arrêts de couleur, des angles et la transparence. Indispensable au design web moderne.

Comment l'utiliser

  1. 1

    Ajouter des couleurs

    Cliquez pour ajouter des arrêts de couleur au dégradé.

  2. 2

    Ajuster les paramètres

    Réglez l'angle, le type (linéaire/radial) et les positions.

  3. 3

    Copier le CSS

    Récupérez le code CSS généré.

Foire aux questions

Qu'est-ce qu'un dégradé linéaire CSS ?

Un dégradé linéaire assure une transition progressive entre deux couleurs ou plus le long d'une ligne droite. Syntaxe : background: linear-gradient(angle, color1, color2, ...). Angles courants : 0° (du bas vers le haut), 90° (de gauche à droite), 180° (du haut vers le bas).

Puis-je l'utiliser en CSS ?

Oui, il génère du code CSS de dégradé standard.

Puis-je définir la position de chaque arrêt de couleur ?

Oui. Chaque arrêt de couleur possède un champ de position de 0 à 100 (pourcentage). Vous pouvez ajouter ou supprimer des arrêts selon vos besoins, avec un minimum de deux. Le CSS généré inclut toujours la position de chaque arrêt.