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

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

Un générateur de dégradés CSS est un outil visuel qui vous permet de créer des transitions de couleurs fluides sans écrire la syntaxe à la main. En CSS, un dégradé est une transition progressive entre deux couleurs ou plus, rendue directement par le navigateur sans fichier image. La spécification CSS Image Module Level 4 définit les fonctions de dégradé comme un type de valeur image, ce qui signifie qu'elles peuvent être utilisées partout où une valeur background-image, list-style-image ou border-image est acceptée. Comme le navigateur rastérise les dégradés au moment du rendu, ils s'adaptent à toute résolution sans produire d'artefacts flous sur les écrans haute densité. Utiliser un générateur de dégradés CSS fait gagner du temps et élimine les approximations — vous ajustez les couleurs et positions visuellement, puis copiez la règle CSS finale.

CSS prend en charge trois formes de dégradés principales : linéaire (le long d'une droite), radial (depuis un point central vers l'extérieur) et conique (un balayage autour d'un point central). Chaque forme accepte une liste de points de couleur, où vous spécifiez la couleur et optionnellement une position (pourcentage ou longueur). Le navigateur interpole les couleurs entre les points dans l'espace colorimétrique sRGB par défaut, bien que CSS Color Level 4 permette de spécifier d'autres espaces comme oklch et lab pour des transitions perceptuellement plus douces.

Les dégradés remplacent les fonds basés sur des images pour la plupart des usages décoratifs sur le web. Une seule règle CSS produit ce qui nécessitait autrefois un export Photoshop et une requête HTTP. Ils sont indépendants de la résolution, ne consomment aucune bande passante réseau au-delà du CSS lui-même, et peuvent être animés ou transitionnés avec les propriétés CSS standard. La syntaxe des dégradés est stable dans tous les navigateurs majeurs depuis 2013, et la forme sans préfixe fonctionne dans Chrome, Firefox, Safari et Edge sans solution de repli.

Pourquoi utiliser ce générateur de dégradés CSS ?

Écrire la syntaxe des dégradés à la main signifie deviner les positions des points, vérifier les valeurs d'angle et rafraîchir sans cesse pour voir le résultat. Un constructeur visuel vous permet de voir le dégradé au fur et à mesure, d'ajuster les points par glisser-déposer et de copier le CSS final quand le résultat convient.

Cas d'usage du générateur de dégradés CSS

Référence des types de dégradés CSS

CSS définit cinq fonctions de dégradé. Les trois types principaux (linear, radial, conic) ont chacun une variante répétée qui répète le motif en mosaïque. repeating-linear-gradient() et repeating-radial-gradient() sont utiles pour les fonds rayés et les anneaux concentriques. Toutes les fonctions de dégradé acceptent des points de couleur dans n'importe quel format CSS : HEX, RGB, HSL, couleurs nommées ou oklch. La compatibilité navigateur pour les cinq fonctions est universelle dans Chrome, Firefox, Safari et Edge — aucun préfixe vendeur n'est requis.

Dégradés linéaires vs radiaux vs coniques

Chaque type de dégradé associe les couleurs à la géométrie différemment. Le choix du bon type dépend de l'effet visuel recherché, pas d'une différence de qualité entre eux. Pour la plupart des fonds de page et des séparateurs de section, un dégradé linéaire est le choix par défaut approprié — c'est le plus simple à comprendre et le plus prévisible sur des éléments de tailles variées. Les dégradés radiaux et coniques sont mieux réservés aux effets visuels spécifiques où la géométrie circulaire ou rotationnelle est significative plutôt que décorative.

Exemples de code

Exemples de génération et d'application de dégradés CSS de manière programmatique en JavaScript, Python, CSS et Go. Chacun produit des chaînes de dégradé CSS valides utilisables directement dans des feuilles de style ou des styles inline.

// Generate a CSS linear-gradient string from an array of stops
function buildGradient(angle, stops) {
  const parts = stops.map(s => `${s.color} ${s.position}%`)
  return `linear-gradient(${angle}deg, ${parts.join(', ')})`
}

const stops = [
  { color: '#6366f1', position: 0 },
  { color: '#ec4899', position: 50 },
  { color: '#f59e0b', position: 100 },
]
buildGradient(90, stops)
// -> "linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

// Apply to an element
document.querySelector('.hero').style.background = buildGradient(135, stops)

# Generate a CSS gradient string for use in templates or SVGs
def build_gradient(angle: int, stops: list[tuple[str, int]]) -> str:
    parts = [f"{color} {pos}%" for color, pos in stops]
    return f"linear-gradient({angle}deg, {', '.join(parts)})"

stops = [("#6366f1", 0), ("#ec4899", 50), ("#f59e0b", 100)]
print(build_gradient(135, stops))
# -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"

# Interpolate N colors between two endpoints
def interpolate_hex(c1: str, c2: str, steps: int) -> list[str]:
    r1, g1, b1 = int(c1[1:3], 16), int(c1[3:5], 16), int(c1[5:7], 16)
    r2, g2, b2 = int(c2[1:3], 16), int(c2[3:5], 16), int(c2[5:7], 16)
    return [
        f"#{int(r1+(r2-r1)*i/(steps-1)):02x}"
        f"{int(g1+(g2-g1)*i/(steps-1)):02x}"
        f"{int(b1+(b2-b1)*i/(steps-1)):02x}"
        for i in range(steps)
    ]

interpolate_hex("#6366f1", "#f59e0b", 4)
# -> ['#6366f1', '#9a7399', '#d18042', '#f59e0b']

/* Linear gradient — left to right */
.hero {
  background: linear-gradient(90deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%);
}

/* Radial gradient — circular spotlight */
.badge {
  background: radial-gradient(circle at 30% 30%, #6366f1, #312e81);
}

/* Conic gradient — color wheel */
.wheel {
  background: conic-gradient(from 0deg, #ef4444, #f59e0b, #22c55e, #3b82f6, #8b5cf6, #ef4444);
  border-radius: 50%;
}

/* Multi-stop with transparency */
.overlay {
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0) 0%,
    rgba(0, 0, 0, 0.6) 60%,
    rgba(0, 0, 0, 0.9) 100%
  );
}

/* Repeating stripes */
.stripes {
  background: repeating-linear-gradient(
    45deg,
    #6366f1 0 10px,
    transparent 10px 20px
  );
}

package main

import "fmt"

// Stop represents one color stop in a gradient.
type Stop struct {
	Color    string
	Position int // percent 0-100
}

func buildGradient(angle int, stops []Stop) string {
	result := fmt.Sprintf("linear-gradient(%ddeg", angle)
	for _, s := range stops {
		result += fmt.Sprintf(", %s %d%%", s.Color, s.Position)
	}
	return result + ")"
}

func main() {
	stops := []Stop{
		{"#6366f1", 0},
		{"#ec4899", 50},
		{"#f59e0b", 100},
	}
	fmt.Println(buildGradient(135, stops))
	// -> "linear-gradient(135deg, #6366f1 0%, #ec4899 50%, #f59e0b 100%)"
}

Questions fréquentes