Générateur d’arrière-plans dégradés en ligne

Prévisualisez en temps réel les dégradés CSS, avec prise en charge des dégradés linéaires, radiaux et coniques ; générez le code et exportez des images en un clic

Signaler un bug

Mode d’exécution du navigateur: Vos données sont traitées dans votre navigateur et ne sont pas envoyées au serveur.

Vitesse et stabilité: La vitesse de traitement dépend de votre appareil et de votre navigateur. Pour les gros lots, la version de bureau peut être plus stable.

Chargement de l’outil, veuillez patienter...

Si l’outil en ligne ne se charge pas ou ne fonctionne pas, essayez l’outil de bureau. https://tools.yikeaigc.com/

Utilisation de l’outil

Retour à l’ancienne version

Définissez le dégradé, puis copiez le code ou exportez l’image. Prend en charge les dégradés linéaires, radiaux, coniques, répétés et les arrêts multicolores. Les paramètres se synchronisent avec l’aperçu à droite.

Définir le dégradé

Choisissez d’abord le type de dégradé, puis ajustez la direction et les arrêts. Il est conseillé de les classer par ordre croissant.

Type de dégradéLe dégradé conique convient aux roues de couleurs et fonds circulaires

Direction et formeLe dégradé linéaire peut utiliser un angle ou une direction rapide

Angle linéaire90°

Période de répétition32%

Forme radiale

Étendue de diffusion

Période de répétition32%

Centre X50%

Centre Y50%

Angle de départ0°

Centre X50%

Centre Y50%

Dégradé répété Calque lumière douce Vignette Texture fine

Points de couleurPrend en charge 2 à 10 points, avec opacité et position réglables

Modèles d’exempleÀ utiliser comme base de palette

Export du code

Après vérification de l’aperçu, copiez le CSS ou exportez des fichiers PNG, JPG, SVG, CSS et un pack de ressources.

Format du codeChoisissez le type de déclaration selon le contexte de développement

Mode code

Nom de classe / variable

Inclure une couleur de fond de repli Compresser le code

Code CSS

Taille d’imageLa taille personnalisée s’applique aux exports image et SVG

Préréglages de taille

Qualité JPG92%

Largeur (px)

Hauteur (px)

Télécharger les ressourcesLe pack contient CSS, SVG, PNG et JSON de réglages

Aperçu en direct

Gradient Preview Mise à jour instantanée après modification

TypeLinéaire

Points de couleur2

Taille d’export1920x1080

Longueur du code0

Instructions

Instructions d’utilisation du logiciel

Définir le type de dégradé : choisissez un dégradé linéaire, radial ou conique. Le linéaire convient aux bannières et aux arrière-plans de pages web, le radial aux effets de diffusion depuis le centre, et le conique aux anneaux, roues chromatiques et motifs décoratifs.
Ajuster la direction et la forme :
- Dégradé linéaire : utilisez les boutons de direction ou réglez une direction de 0 à 360 degrés avec le curseur d’angle.
- Dégradé radial : définissez une forme circulaire ou elliptique, la zone de diffusion et la position X/Y du point central.
- Dégradé conique : définissez l’angle de départ et la position du point central.
Configurer les points de couleur : utilisez le sélecteur de couleur, le champ HEX, le pourcentage de position et les paramètres de transparence pour contrôler chaque point de couleur. Vous pouvez ajouter, supprimer, trier et inverser les couleurs, ainsi que répartir les points uniformément en un clic.
Utiliser les options d’effet : activez le dégradé répété, la couche de lumière douce, le vignettage et les fines textures pour rendre l’arrière-plan plus adapté aux écrans d’accueil de sites web, cartes, affiches et ressources de design.
Copier et exporter : dans « Exportation du code », choisissez un nom de classe CSS, le mode déclarations uniquement ou variables CSS. Vous pouvez copier le code CSS ou exporter des fichiers PNG, JPG, SVG, CSS et un pack de ressources ZIP.
Enregistrer et partager : dans « Enregistrer et partager », enregistrez les paramètres actuels, générez un lien de partage ou collez un code de dégradé CSS existant pour le charger dans l’outil et continuer l’édition.

Questions fréquentes

R : Un dégradé linéaire effectue une transition le long d’une ligne droite, idéal pour les arrière-plans de sites web, les boutons et les bannières ; un dégradé radial se diffuse du centre vers l’extérieur, idéal pour les effets de projecteur et les arrière-plans en couches ; un dégradé conique tourne autour du centre, idéal pour les roues chromatiques, les anneaux et les effets décoratifs.

R : Cliquez sur « Ajouter une couleur » pour ajouter des points de couleur, puis définissez séparément la couleur, le pourcentage de position et la transparence. La position des points influence la zone de transition des couleurs ; vous pouvez aussi utiliser « Répartition uniforme » pour organiser rapidement les points.

Réponse : les dégradés répétés conviennent à la création d’arrière-plans réguliers tels que des rayures, des ondulations ou des textures circulaires répétitives. Les dégradés linéaires et radiaux peuvent activer le mode répétition ; pour les dégradés coniques, il est recommandé de contrôler l’effet via les points de couleur et les angles.

Réponse : vous pouvez exporter des fichiers PNG, JPG, SVG et CSS, ainsi que télécharger un pack de ressources ZIP. Le pack contient le code CSS, le fichier SVG, l’image PNG et les paramètres JSON, ce qui facilite l’archivage et les modifications ultérieures.

Réponse : après avoir copié le code CSS généré, collez-le simplement dans le fichier de styles de votre page web. L’outil propose trois modes : nom de classe CSS, déclarations seules et variables CSS, à choisir selon les habitudes de votre projet.

Réponse : oui. Dans la section « Importer le CSS » de « Enregistrer et partager », collez un code linear-gradient, radial-gradient ou conic-gradient, puis cliquez sur « Charger dans l’outil » pour continuer à ajuster les couleurs, l’angle et la position.

Réponse : non. La génération du dégradé, la copie du code, le rendu de l’image et l’empaquetage des ressources sont tous effectués localement, sans avoir à téléverser le contenu de conception sur le serveur.