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

linear-gradient(90deg, #3498db 0%, #9b59b6 100%)

Apercu de l'outil : Générateur de dégradés CSS

Le Générateur de dégradés CSS est un outil en ligne professionnel qui vous aide à créer et personnaliser des dégradés CSS en quelques secondes. Il prend en charge les dégradés linéaires, radiaux et coniques avec aperçu en temps réel et plusieurs modèles prédéfinis.

Qu'est-ce que Générateur de dégradés CSS ?

Générateur de dégradés CSS permet de créer des dégradés CSS et exporter le code pour prévisualiser et exporter rapidement.

Cas d'usage courants

• Optimiser les assets web/app
• Convertir des formats pour design/dev
• Retouches rapides pour social ou e‑commerce

Fonctionnalités

Plusieurs types de dégradés

• Dégradé linéaire : transition des couleurs le long d'une ligne droite
• Dégradé radial : dégradés circulaires ou elliptiques partant du centre
• Dégradé conique : transition des couleurs en rotation autour d'un point central

Aperçu en temps réel

• Aperçu WYSIWYG de l'effet de dégradé
• Mise à jour immédiate du code CSS
• Grande zone de prévisualisation

Gestion des couleurs

• Ajoutez plusieurs points de couleur
• Personnalisez la position de chaque couleur (0-100 %)
• Compatible avec tous les formats de couleur CSS (HEX, RGB, HSL, etc.)

Commandes du dégradé

• Dégradé linéaire : ajustez l'angle (0-360 degrés)
• Dégradé radial : choisissez une forme circulaire ou elliptique
• Dégradé conique : définissez la position du centre

Directions prédéfinies

• Boutons fléchés rapides pour les huit directions courantes
• Met à jour instantanément l'entrée d'angle sans saisie manuelle
• L'état surligné confirme la direction sélectionnée

Modèles prédéfinis

De nombreux dégradés attrayants disponibles :

• Sunset, Ocean, Forest
• Fire, Sky, Purple Rain
• Candy, Midnight et bien d'autres

Historique

• Enregistre automatiquement les dégradés créés
• Restauration en un clic des dégradés précédents
• Option pour effacer l'historique

Outils pratiques

• Copier le code CSS dans le presse-papiers
• Générateur de dégradés aléatoires
• Inversion de l'ordre des couleurs

Comment l'utiliser

Étapes de base

1. Choisissez le type de dégradé : linéaire, radial ou conique en haut de la page
2. Ajustez les paramètres : définissez les valeurs ou utilisez un bouton de direction selon le type
3. Ajoutez des couleurs : cliquez sur « Ajouter une couleur » pour ajouter un point de couleur
4. Personnalisez les couleurs : sélectionnez les teintes et ajustez leurs positions
5. Utilisez les presets (facultatif) : cliquez sur une carte pour charger un dégradé prêt à l'emploi
6. Copiez le code : cliquez sur « Copier le code » pour obtenir le CSS

Réglages du dégradé linéaire

• Utilisez le curseur ou le champ numérique pour régler la direction
• Plage d'angle : 0 à 360 degrés
• 0° correspond du bas vers le haut, 90° de gauche à droite

Réglages du dégradé radial

• Choisissez la forme : cercle ou ellipse
• Par défaut, le dégradé s'étend depuis le centre
• La position du centre peut être personnalisée via le code CSS

Réglages du dégradé conique

• Définissez la position horizontale et verticale du centre
• Accepte des pourcentages ou des valeurs en pixels
• Les couleurs tournent dans le sens horaire autour du centre

Presets et historique

• Survolez un preset pour l'apercevoir, cliquez pour l'appliquer immédiatement
• Chaque preset affiche un dégradé en direct calculé à partir de ses points de couleur
• Les dégradés récents sont enregistrés automatiquement et disponibles dans la barre d'historique
• L'historique conserve les 10 derniers dégradés uniques et est stocké dans le local storage du navigateur

Exemples de code CSS

Dégradé linéaire

background: linear-gradient(90deg, #ff7e5f 0%, #feb47b 100%);

Dégradé radial

background: radial-gradient(circle, #ff7e5f 0%, #feb47b 100%);

Dégradé conique

background: conic-gradient(from 0deg at 50% 50%, #ff7e5f 0%, #feb47b 100%);

Compatibilité navigateur

• Navigateurs modernes : prise en charge complète de tous les types de dégradés
• IE 10+ : compatible avec les dégradés linéaires et radiaux
• Dégradés coniques : nécessitent des versions récentes des navigateurs modernes

Cas d'utilisation

Les dégradés CSS sont largement utilisés pour :

1. Arrière-plans web : créer des effets visuels attractifs
2. Boutons : ajouter un dégradé aux boutons
3. Cartes : renforcer la hiérarchie visuelle des cartes
4. Animations de chargement : produire des effets dynamiques
5. Identité de marque : combiner les couleurs de marque dans un dégradé

Conseils d'utilisation

1. Choix des couleurs : privilégiez des contrastes modérés pour préserver le confort visuel
2. Positionnement : répartissez les positions pour obtenir des transitions fluides
3. Tests de prévisualisation : vérifiez le rendu du dégradé sur différents fonds
4. Performances : limitez le nombre de points de couleur utilisés
5. Responsive design : contrôlez le rendu sur différentes tailles d'écran

FAQ

Q : Comment créer un dégradé arc-en-ciel ?

R : Ajoutez des points de couleur rouge, orange, jaune, vert, bleu, indigo et violet répartis de manière uniforme.

Q : Que faire si le dégradé n'apparaît pas dans certains navigateurs ?

R : Vérifiez la version du navigateur et ajoutez les préfixes nécessaires (-webkit-, -moz-, -o-).

Q : Comment créer des dégradés répétitifs ?

R : Utilisez les fonctions repeating-linear-gradient, repeating-radial-gradient ou repeating-conic-gradient.

Q : Comment optimiser les performances du dégradé ?

R : Réduisez le nombre de points de couleur, évitez les combinaisons trop complexes et envisagez d'utiliser des images lorsque c'est pertinent.