Passer au contenu principal

Générateur de dégradé CSS : linear, radial et conic gradient

Créez et personnalisez vos dégradés CSS en temps réel : linear-gradient, radial-gradient, conic-gradient et leurs variantes répétées. Ajustez l'angle, les arrêts de couleur, l'opacité et la position — copiez le code CSS prêt à l'emploi en un clic.

Aperçu en temps réel
°
background-image
background (shorthand)
CSS Variable

Dégradés prédéfinis

Tout ce que vous pouvez faire avec ce générateur CSS

Ce générateur de dégradé CSS en ligne vous permet de créer facilement tous types de dégradés : linear-gradient, radial-gradient, conic-gradient et leurs variantes répétées. Copiez le CSS généré en un clic et intégrez-le directement dans votre projet.

Linear gradient CSS

Le linear-gradient() crée un dégradé le long d'une ligne droite selon un angle défini. Vous pouvez choisir l'angle avec la boussole visuelle ou les raccourcis directionnels, puis ajuster autant d'arrêts de couleur que nécessaire avec position et opacité personnalisables.

Radial et conic gradient

Le radial-gradient() rayonne depuis un point central, utile pour les effets de lumière ou de profondeur. Le conic-gradient() tourne autour d'un point, parfait pour les graphiques en camembert et les effets dégradés rotatifs.

Variables CSS et préfixes webkit

Activez l'option var() pour générer une variable CSS réutilisable dans tout votre projet. Activez -webkit- pour une compatibilité avec les anciens navigateurs Safari et Chrome.

Questions fréquentes

Choisissez le type de dégradé (linear, radial ou conic), ajustez l'angle ou la direction, puis personnalisez vos arrêts de couleur en modifiant la couleur, l'op... Choisissez le type de dégradé (linear, radial ou conic), ajustez l'angle ou la direction, puis personnalisez vos arrêts de couleur en modifiant la couleur, l'opacité et la position. Le CSS est généré automatiquement et peut être copié en un clic.

Un linear-gradient suit une ligne droite selon un angle défini (ex : de gauche à droite, en diagonale). Un radial-gradient rayonne depuis un point central vers ... Un linear-gradient suit une ligne droite selon un angle défini (ex : de gauche à droite, en diagonale). Un radial-gradient rayonne depuis un point central vers l'extérieur, créant un effet circulaire ou elliptique. Le conic-gradient, lui, tourne autour d'un point central comme les aiguilles d'une montre.

Cliquez sur le bouton 'Ajouter' pour insérer un nouvel arrêt de couleur. Chaque arrêt possède son propre sélecteur de couleur, curseur d'opacité et position en ... Cliquez sur le bouton 'Ajouter' pour insérer un nouvel arrêt de couleur. Chaque arrêt possède son propre sélecteur de couleur, curseur d'opacité et position en pourcentage. Vous pouvez ainsi créer des dégradés à 3, 4, 5 couleurs ou plus.

Copiez la propriété background-image ou background générée et collez-la directement dans votre CSS. Vous pouvez activer l'option -webkit- pour une compatibilité... Copiez la propriété background-image ou background générée et collez-la directement dans votre CSS. Vous pouvez activer l'option -webkit- pour une compatibilité avec les anciens navigateurs, ou l'option var() pour créer une variable CSS réutilisable dans tout votre projet.

Le repeating-linear-gradient répète indéfiniment le motif de dégradé défini par vos arrêts de couleur. Il est idéal pour créer des effets de rayures, de hachure... Le repeating-linear-gradient répète indéfiniment le motif de dégradé défini par vos arrêts de couleur. Il est idéal pour créer des effets de rayures, de hachures ou des motifs géométriques répétitifs. La taille du motif est déterminée par la position du dernier arrêt de couleur.

Utilisez le curseur d'opacité (α) sur l'un de vos arrêts de couleur. En mettant l'opacité à 0%, la couleur devient entièrement transparente. Le générateur produ... Utilisez le curseur d'opacité (α) sur l'un de vos arrêts de couleur. En mettant l'opacité à 0%, la couleur devient entièrement transparente. Le générateur produira automatiquement une valeur rgba() dans le CSS, permettant un fondu transparent propre.

Le conic-gradient est supporté par tous les navigateurs modernes (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Il couvre plus de 95% des utilisateurs en 20... Le conic-gradient est supporté par tous les navigateurs modernes (Chrome 69+, Firefox 83+, Safari 12.1+, Edge 79+). Il couvre plus de 95% des utilisateurs en 2025. Pour les anciens navigateurs, vous pouvez utiliser un linear-gradient comme fallback.

Outils de la même catégorie

Encodeur / Décodeur URL Minifieur CSS / JS / HTML Générateur de Favicon Convertisseur HEX / RGB / HSL Convertisseur binaire/décimal/hexadécimal Visualiser code HTML en ligne JSON Formatter Online Base64 Encoder Decoder

Outils populaires

Calculateur Matériaux Calculateur Pente Toiture Générateur Planning Travaux Simulateur Coût Rénovation Calculateur Coût Embauche

Outils tendance

Calculateur Matériaux Calculateur Pente Toiture Générateur Planning Travaux Simulateur Coût Rénovation Calculateur Coût Embauche
-->