Générateur de gradient CSS
Concevoir des dégradés lisses visuellement et copier le CSS — sans gris boueux au milieu.
- Vos données ne quittent jamais votre appareil
- 100 % gratuit
- Sans inscription
- Fonctionne hors ligne après la première charge
Comment créer un dégradé CSS
- Choisissez linéaire, radial ou conique et définissez l'angle ou le centre.
- Cliquez sur la barre pour ajouter des couleurs, faites glisser pour les positionner et choisissez des couleurs.
- Copiez le CSS, Tailwind ou SVG — ou téléchargez un fichier PNG.
À propos : Générateur de dégradés
Concevoir des dégradés CSS linéaires, radiaux et coniques visuellement.
Tout fonctionne dans votre navigateur, il est donc instantané et privé. Vos couleurs et paramètres récents sont mémorisés sur cet appareil, et la barre d'adresse conserve votre couleur afin que vous puissiez la partager ou la mettre en signet.
Idéal pour
- Héros et arrière-plans du site
- Boutons, cartes et effets de texte
- Fonds d'écran et graphiques sociaux
Conseil : Choisissez un préréglage comme point de départ, puis modifiez ses couleurs.
Questions fréquentes
Pourquoi mon dégradé semble-t-il gris au milieu?
Le mélange de deux couleurs opposées dans le sRGB passe par le gris. — pas de milieu gris » ou OKLCH — l'outil écrit le CSS moderne (linéaire-gradient (dans oklab …)) plus un repli pour les navigateurs plus anciens.
Comment ajouter ou déplacer des couleurs ?
Cliquez sur la barre de dégradé pour ajouter une couleur, faites glisser les poignées pour les déplacer, sélectionnez-en une pour changer de couleur, d’opacité ou de position, puis appuyez sur Supprimer l’arrêt pour l’enlever.
Puis-je télécharger le dégradé sous forme d'image ?
Oui — en tant que PNG au format 1920 × 1080, 4K, carré, histoire ou bannière, ou en tant que fichier SVG.
Est-ce que ça fait des classes Tailwind ?
Oui — Les gradients simples deviennent bg-gradient-to-* avec des classes from/via/to ; d'autres une valeur arbitraire bg-[…].
Les dégradés coniques fonctionnent-ils dans tous les navigateurs ?
Oui — Les versions actuelles de Chrome, Edge, Firefox et Safari prennent toutes en charge les dégradés linéaires, radiaux et coniques.