- Generateur de Gradient CSS : linear, radial, conic

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

Un dégradé CSS (gradient) est une fonction d'image générée par le moteur du navigateur qui produit une transition douce entre deux couleurs ou plus, sans nécessiter le moindre fichier image. Standardisée dans la spécification CSS Images Module Level 3 (W3C, 2012) et étendue par CSS Images Level 4, cette fonctionnalité est aujourd'hui supportée par plus de 99 % des navigateurs en circulation selon Can I Use, ce qui en fait l'une des techniques les plus fiables pour habiller backgrounds, boutons, cartes ou héros de page.

Pourquoi préférer un gradient CSS à une image ?

Les bénéfices techniques par rapport à un PNG ou JPEG sont multiples :

• Poids réseau nul — un dégradé CSS ne génère aucune requête HTTP, contrairement à une image qui peut peser entre 5 et 200 Ko même optimisée. Sur un site avec 50 cards et un dégradé d'arrière-plan, c'est plusieurs Mo économisés au chargement.
• Vectoriel et responsive natif — un gradient CSS s'étire mathématiquement à n'importe quelle taille d'écran sans pixelisation, là où une image bitmap montre ses limites en haute densité (Retina, 4K).
• Animable et interactif — via les custom properties CSS et les transitions, un gradient peut être modifié dynamiquement (hover, dark mode, JavaScript) sans recharger d'asset.
• Léger pour le repaint — le moteur de rendu navigateur traite les gradients comme des opérations GPU optimisées, plus performantes que le décodage et le rééchantillonnage d'une image.

Syntaxe générique commune aux 3 types

Tous les gradients CSS partagent la même structure de base : un mot-clé fonction (linear-gradient, radial-gradient, conic-gradient), suivi de paramètres directionnels, puis une liste de color stops séparés par des virgules.

/* Modèle générique */
background-image: <type>-gradient(
    [direction|shape|position],
    color-stop-1,
    color-stop-2,
    ... ,
    color-stop-n
);

/* Exemple linear */
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

/* Exemple radial */
background-image: radial-gradient(circle at center, #ff7e5f, #feb47b);

/* Exemple conic */
background-image: conic-gradient(from 90deg, red, yellow, green, red);

Les 3 types : linear, radial et conic

linear-gradient — le dégradé linéaire

Le linear-gradient est le type le plus utilisé : les couleurs progressent en ligne droite selon un angle ou une direction. L'angle est exprimé en degrés (deg), turns (turn) ou radians (rad) et part du nord (0deg = vers le haut) en sens horaire.

/* Angle en degrés */
background: linear-gradient(45deg, #1a56db, #ec4899);

/* Mots-clés directionnels — équivalents */
background: linear-gradient(to right,        #1a56db, #ec4899);  /* = 90deg */
background: linear-gradient(to bottom right, #1a56db, #ec4899);  /* = 135deg */
background: linear-gradient(to top,          #1a56db, #ec4899);  /* = 0deg   */

/* Multi-stops avec positions explicites */
background: linear-gradient(
    90deg,
    #1a56db   0%,
    #6366f1  35%,
    #ec4899  70%,
    #f59e0b 100%
);

radial-gradient — le dégradé radial

Le radial-gradient rayonne depuis un point central vers l'extérieur, en formant soit une ellipse (par défaut, ratio adapté au container), soit un cercle. Il accepte aussi un mot-clé de taille (closest-side, farthest-corner…) qui détermine où le dernier color stop atteint sa pleine valeur.

/* Radial centré, ellipse, taille farthest-corner par défaut */
background: radial-gradient(#ff7e5f, #feb47b);

/* Cercle positionné en haut à gauche */
background: radial-gradient(circle at top left, #84fab0, #8fd3f4);

/* Avec taille explicite — utile pour effets spotlight */
background: radial-gradient(
    circle 200px at 50% 50%,
    rgba(255, 255, 255, 0.8),
    transparent
);

/* Multi-stops radial */
background: radial-gradient(
    ellipse at center,
    #fff      0%,
    #ffd5b8  40%,
    #ff7e5f 100%
);

conic-gradient — le dégradé conique

Le conic-gradient tourne autour d'un point central comme l'aiguille d'une horloge. Disponible depuis 2020 dans tous les navigateurs majeurs, il est idéal pour créer des graphiques en camembert (pie charts), des roues de couleurs, des effets holographiques ou des cadrans circulaires en pur CSS.

/* Conic basique — démarrage à 0deg (haut) */
background: conic-gradient(red, yellow, lime, blue, magenta, red);

/* Avec angle de départ personnalisé */
background: conic-gradient(from 45deg at center, #1a56db, #ec4899, #1a56db);

/* Pie chart — segments figés via stops identiques */
background: conic-gradient(
    #1a56db   0deg  120deg,
    #ec4899 120deg  220deg,
    #f59e0b 220deg  360deg
);

/* Effet "neon ring" */
.neon-ring {
    background: conic-gradient(
        from 0deg,
        #00d4ff, #ff00ea, #ffae00, #00d4ff
    );
    border-radius: 50%;
    animation: spin 4s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

Color stops et hints — maîtriser la transition

Un color stop est la combinaison d'une couleur et d'une position le long de l'axe du dégradé. La position peut être omise (le navigateur la calcule alors automatiquement de manière équidistante) ou spécifiée en %, px, em ou autre unité de longueur.

Positions équidistantes vs explicites

Sans position, deux couleurs se distribuent à 0 % et 100 %, trois couleurs à 0 %, 50 %, 100 %, et ainsi de suite. Pour des transitions plus fines ou décalées, il faut spécifier les positions :

/* Distribution automatique (équidistante) */
background: linear-gradient(90deg, red, yellow, green, blue);
/* → red 0%, yellow 33.3%, green 66.6%, blue 100% */

/* Distribution personnalisée — virage rapide vers le bleu */
background: linear-gradient(
    90deg,
    red    0%,
    yellow 10%,
    green  20%,
    blue  100%
);

/* Bandes nettes — same position = transition instantanée */
background: linear-gradient(
    90deg,
    red    0%,
    red    25%,
    yellow 25%,
    yellow 50%,
    green  50%,
    green  75%,
    blue   75%,
    blue  100%
);
/* → drapeau à 4 bandes nettes */

Color hints — le point de mid-transition

Un color hint est une position numérique placée entre deux color stops, sans couleur associée. Il indique au navigateur où se trouve le milieu de la transition. Cela permet d'avoir une transition non linéaire entre deux couleurs :

/* Sans hint — transition linéaire */
background: linear-gradient(90deg, white, black);
/* → milieu (50%) = gris #808080 */

/* Avec hint à 25% — transition asymétrique */
background: linear-gradient(90deg, white, 25%, black);
/* → la couleur "moyenne" est atteinte à 25%, donc le dégradé
     est très lumineux jusqu'à 25%, puis plonge vers le noir */

Transparence et superposition

Utiliser transparent ou rgba(.., 0) dans un color stop crée un effet de fondu. C'est particulièrement utile pour superposer un dégradé sur une image (vignettage, fade-in/out) :

/* Vignette sombre en bas d'une image (banner cinéma) */
.banner {
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.85) 100%),
        url('hero.jpg') center/cover;
    height: 480px;
    color: white;
}

/* Fade horizontal sur les côtés (carrousel) */
.carousel-fade::before,
.carousel-fade::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 80px;
    pointer-events: none;
}
.carousel-fade::before {
    left: 0;
    background: linear-gradient(90deg, var(--bg) 0%, transparent 100%);
}
.carousel-fade::after {
    right: 0;
    background: linear-gradient(270deg, var(--bg) 0%, transparent 100%);
}

repeating-* — créer des motifs répétés

Les variantes repeating-linear-gradient, repeating-radial-gradient et repeating-conic-gradient répètent le motif du dernier stop défini sur toute la surface. Très utiles pour des rayures, des grilles ou des effets d'animation infinie :

/* Rayures diagonales — pattern de chargement */
.stripes {
    background: repeating-linear-gradient(
        45deg,
        #1a56db,
        #1a56db 10px,
        #2563eb 10px,
        #2563eb 20px
    );
}

/* Grille de fond légère */
.grid-bg {
    background:
        repeating-linear-gradient(0deg, #f3f4f6 0 1px, transparent 1px 40px),
        repeating-linear-gradient(90deg, #f3f4f6 0 1px, transparent 1px 40px);
}

/* Effet "barber pole" animé */
.barber {
    background: repeating-linear-gradient(
        45deg,
        #ef4444 0 20px,
        #fff   20px 40px
    );
    background-size: 56.5px 56.5px;
    animation: slide 1.5s linear infinite;
}
@keyframes slide {
    to { background-position: 56.5px 0; }
}

Gradients & Bootstrap 5

Bootstrap 5 expose nativement les gradients via des classes utilitaires et des mixins SCSS. Vous pouvez soit utiliser les classes fournies, soit personnaliser la palette de dégradés via la configuration $gradients.

Classes Bootstrap pour gradients

Bootstrap ne fournit pas de classes préfabriquées pour linear-gradient (par design minimaliste), mais expose la fonctionnalité via background-image directement :

<!-- Gradient personnalisé en HTML (classe arbitraire) -->
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);">
    Contenu
</div>

<!-- Mieux : variable CSS + class utilitaire Bootstrap -->
<div class="bg-light p-5" style="background: linear-gradient(90deg, #1a56db, #ec4899) !important;">
    Contenu
</div>

<!-- Pattern idéal : CSS personnalisée dans _variables.scss -->
<div class="gradient-primary p-5">
    Contenu
</div>

Personnaliser Bootstrap avec des gradients

Pour intégrer des gradients au système de design Bootstrap, étendez les variables SCSS :

// custom/_gradients.scss
$gradients: (
  'primary':   linear-gradient(135deg, #667eea 0%, #764ba2 100%),
  'success':   linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%),
  'danger':    linear-gradient(135deg, #ff5858 0%, #f857a6 100%),
  'warning':   linear-gradient(135deg, #f6d365 0%, #fda085 100%),
  'info':      linear-gradient(135deg, #0093e9 0%, #80d0c7 100%),
  'spotlight': radial-gradient(circle at top, rgba(255,255,255,0.15), transparent 60%)
);

// Générer les classes .gradient-* utilitaires
@each $name, $gradient in $gradients {
  .gradient-#{$name} {
    background: $gradient !important;
  }
}

// Utilisation en HTML
<div class="gradient-primary text-white p-5 rounded">
    Texte blanc sur gradient primaire
</div>

Gradients sur composants Bootstrap

Les patrons les plus courants : CTA buttons, cards, alerts et héros sections :

<!-- Bouton CTA avec gradient hover -->
<button class="btn btn-primary">
    Action
</button>

<style>
.btn-primary {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border: none;
    transition: all 0.3s ease;
}
.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(102, 126, 234, 0.4);
}
</style>

<!-- Card avec bordure gradient (via pseudo-élément) -->
<div class="card gradient-border">
    <div class="card-body">
        Contenu
    </div>
</div>

<style>
.gradient-border {
    position: relative;
    border: none;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #667eea, #764ba2) border-box;
    border: 2px solid transparent;
    border-radius: 0.375rem;
}
</style>

Exemple complet : héros section Bootstrap + gradient

<section class="hero-gradient text-white py-5">
    <div class="container">
        <div class="row align-items-center">
            <div class="col-lg-6">
                <h1 class="display-4 fw-bold">Titre accrocheur</h1>
                <p class="lead">Description courte du service ou produit.</p>
                <button class="btn btn-light btn-lg">Commencer </button>
            </div>
            <div class="col-lg-6">
                <img src="hero-illustration.svg" alt="Illustration" class="img-fluid">
            </div>
        </div>
    </div>
</section>

<style>
.hero-gradient {
    background:
        linear-gradient(180deg, transparent, rgba(0,0,0,0.3)),
        linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 500px;
    display: flex;
    align-items: center;
}

.hero-gradient .btn-light:hover {
    background-color: #fff !important;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}
</style>

Intégration Tailwind, SCSS et Angular

Tailwind CSS — classes utilitaires

Tailwind expose nativement les linear-gradients via la directive bg-gradient-to-{direction} couplée aux classes from-{color}, via-{color} et to-{color}. Pour des cas plus complexes (radial, conic, multi-stops fins), il faut étendre la configuration ou utiliser bg-[…] arbitraire :

{/* Tailwind v3+ — gradient simple */}
<div class="bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500">
  Texte sur dégradé
</div>

{/* Tailwind v3+ — radial via classe arbitraire */}
<div class="bg-[radial-gradient(circle_at_top,_#84fab0,_#8fd3f4)]">
  Radial gradient
</div>

{/* Tailwind v4+ — radial natif */}
<div class="bg-radial from-blue-500 to-pink-500">...</div>
<div class="bg-conic from-yellow-400 via-red-500 to-pink-500">...</div>

// tailwind.config.js — extension de la palette
module.exports = {
  theme: {
    extend: {
      backgroundImage: {
        'sunset':   'linear-gradient(135deg, #fa709a, #fee140)',
        'aurora':   'linear-gradient(90deg, #00c6ff, #0072ff)',
        'spotlight':'radial-gradient(circle at 50% 0%, rgba(255,255,255,0.15), transparent 60%)'
      }
    }
  }
}

// Utilisation
<div class="bg-sunset h-64">...</div>

SCSS / SASS — variables et mixins

En SCSS, encapsuler les dégradés dans des variables ou mixins favorise la cohérence et la maintenance d'un design system. Une convention courante est de stocker les gradients dans une map :

// _gradients.scss
$gradients: (
    'primary': linear-gradient(135deg, #667eea 0%, #764ba2 100%),
    'success': linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%),
    'danger':  linear-gradient(135deg, #ff5858 0%, #f857a6 100%),
    'sunset':  radial-gradient(circle at top, #ff7e5f, #feb47b)
);

@mixin gradient($name) {
    background: map-get($gradients, $name);
}

// Utilisation
.btn-primary {
    @include gradient('primary');
    color: #fff;
    transition: filter 0.2s;
}

.btn-primary:hover {
    filter: brightness(1.1) saturate(1.05);
}

Angular — gradients dynamiques avec Signals

Dans une application Angular moderne (16+), les gradients peuvent être pilotés par signals via le NgStyle ou des bindings [style.background]. Idéal pour des dashboards dynamiques où la couleur reflète une donnée :

// component.ts
import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-stat-card',
  standalone: true,
  template: `
    <div class="card" [style.background]="cardGradient()">
      <h3>{{ value() }}%</h3>
    </div>
  `,
})
export class StatCardComponent {
  value = signal(72);

  cardGradient = computed(() => {
    const v = this.value();
    if (v >= 80) return 'linear-gradient(135deg, #84fab0, #8fd3f4)';
    if (v >= 50) return 'linear-gradient(135deg, #f6d365, #fda085)';
    return 'linear-gradient(135deg, #ff5858, #f857a6)';
  });
}

Exemples pratiques & cas d'usage réels

1. Bouton CTA avec accent gradient et animation

<a href="/signup" class="btn-gradient-cta">
    S'inscrire maintenant
</a>

<style>
.btn-gradient-cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 32px;
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 50%, #c92a2a 100%);
    color: #fff;
    text-decoration: none;
    border-radius: 8px;
    font-weight: 600;
    font-size: 1rem;
    transition: all 0.3s ease;
    box-shadow: 0 4px 12px rgba(255, 107, 107, 0.3);
}

.btn-gradient-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(255, 107, 107, 0.4);
    background: linear-gradient(135deg, #ff7979 0%, #f06595 50%, #e03131 100%);
    color: #fff;
    text-decoration: none;
}
</style>

2. Badge ou "pill" avec dégradé

<span class="badge-gradient badge-gradient-blue">
    Nouveau
</span>
<span class="badge-gradient badge-gradient-purple">
    En vedette
</span>

<style>
.badge-gradient {
    display: inline-block;
    padding: 0.35rem 0.85rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #fff;
}

.badge-gradient-blue {
    background: linear-gradient(135deg, #3b82f6 0%, #1e40af 100%);
}

.badge-gradient-purple {
    background: linear-gradient(135deg, #a78bfa 0%, #7c3aed 100%);
}
</style>

3. Barre de progression avec dégradé

<div class="progress-gradient">
    <div class="progress-gradient-fill" style="width: 75%;">
        75%
    </div>
</div>

<style>
.progress-gradient {
    width: 100%;
    height: 24px;
    background: #e5e7eb;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.progress-gradient-fill {
    height: 100%;
    background: linear-gradient(90deg, #10b981 0%, #059669 50%, #047857 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    transition: width 0.4s ease;
}
</style>

4. Card avec "shine effect" gradient animé

<div class="card-shine">
    <div class="card-shine-inner">
        <h3>Feature Title</h3>
        <p>Courte description du service.</p>
    </div>
</div>

<style>
.card-shine {
    position: relative;
    padding: 24px;
    background: #fff;
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    overflow: hidden;
    transition: all 0.3s ease;
}

.card-shine::before {
    content: '';
    position: absolute;
    top: -50%;
    left: -100%;
    width: 200%;
    height: 200%;
    background: linear-gradient(
        45deg,
        transparent 30%,
        rgba(255, 255, 255, 0.5) 50%,
        transparent 70%
    );
    animation: shine 3s infinite;
}

@keyframes shine {
    0% { left: -100%; top: -50%; }
    100% { left: 100%; top: -50%; }
}

.card-shine:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
    transform: translateY(-4px);
}
</style>

5. "Glassmorphism" avec dégradé de fond et flou

<div class="glass-card">
    <h4>Modal Glassmorphic</h4>
    <p>Contenu avec effet verre sur dégradé lumineux.</p>
</div>

<style>
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    position: relative;
    z-index: 1;
}

.glass-card::before {
    content: '';
    position: absolute;
    inset: -10px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 16px;
    z-index: -1;
    opacity: 0.3;
}

.glass-card h4,
.glass-card p {
    color: #fff;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
</style>

6. Texte avec dégradé (background-clip technique)

<h1 class="text-gradient">
    Dégradé de texte brillant
</h1>

<style>
.text-gradient {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    background-size: 200% 200%;
    animation: gradientShift 3s ease infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}
</style>

7. Dégradé en overlay pour des images (pattern newsletter)

<section class="newsletter-hero">
    <div class="newsletter-overlay"></div>
    <div class="newsletter-content">
        <h2>Abonnez-vous à notre newsletter</h2>
        <form>
            <input type="email" placeholder="votre@email.com">
            <button type="submit">S'abonner</button>
        </form>
    </div>
</section>

<style>
.newsletter-hero {
    position: relative;
    min-height: 300px;
    background: url('newsletter-bg.jpg') center/cover;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

.newsletter-overlay {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(180deg, transparent 0%, rgba(0,0,0,0.4) 100%),
        linear-gradient(90deg, #667eea 0%, #764ba2 100%);
    opacity: 0.85;
    z-index: 1;
}

.newsletter-content {
    position: relative;
    z-index: 2;
    color: #fff;
    text-align: center;
}
</style>

Performances, accessibilité et bonnes pratiques

Coût de rendu — paint et compositing

Un gradient CSS déclenche le paint du navigateur lorsqu'il est dessiné, mais peut être promu en compositor layer via will-change: background ou transform: translateZ(0). En pratique :

• Gradients statiques : aucun impact mesurable, même sur des écrans pleins.
• Gradients animés via transition: background ou @keyframes sur background-position : peuvent atteindre 60 fps sur desktop, mais saccader sur mobile entrée de gamme.
• Conic-gradient avec rotation via transform: rotate() : très performant car la rotation est gérée par le GPU, pas le CPU.

/* ❌ Animation coûteuse — repaint chaque frame */
.bg-shift {
    background: linear-gradient(90deg, #1a56db, #ec4899);
    transition: background 1s ease;
}

/* ✅ Animation performante — compositing GPU */
.bg-shift {
    background: linear-gradient(90deg, #1a56db, #ec4899);
    background-size: 200% 100%;
    animation: shiftBg 4s ease infinite;
}
@keyframes shiftBg {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

Accessibilité — contraste du texte sur gradient

Le piège classique : un dégradé de bleu vers blanc rend illisible un texte sombre dans la zone bleue mais clair dans la zone blanche. Les WCAG 2.1 imposent un ratio de contraste minimal de 4.5:1 pour le texte normal et 3:1 pour le texte large. Trois stratégies :

• Texte avec ombre portée : un text-shadow: 0 1px 2px rgba(0,0,0,0.4) améliore la lisibilité quel que soit le fond.
• Overlay sombre : ajouter un dégradé semi-transparent par-dessus le visuel pour uniformiser le contraste.
• Container dédié : encapsuler le texte dans une boîte avec background: rgba(0,0,0,0.5) et backdrop-filter: blur(6px).

/* Pattern accessible — texte sur banner gradient */
.hero {
    background:
        linear-gradient(0deg, rgba(0,0,0,0.55), rgba(0,0,0,0.15)),
        linear-gradient(135deg, #667eea, #764ba2);
    color: #ffffff;
    text-shadow: 0 1px 3px rgba(0,0,0,0.5);
    padding: 4rem 2rem;
}

Dark mode — adapter les dégradés

Sur un thème sombre, les gradients clairs deviennent souvent trop saturés et fatigants. La meilleure approche est d'utiliser des custom properties CSS qui changent selon l'attribut data-theme :

:root {
    --grad-primary: linear-gradient(135deg, #667eea, #764ba2);
    --grad-success: linear-gradient(135deg, #84fab0, #8fd3f4);
}

[data-theme="dark"] {
    --grad-primary: linear-gradient(135deg, #1e293b, #334155);
    --grad-success: linear-gradient(135deg, #064e3b, #047857);
}

.btn-primary { background: var(--grad-primary); }
.btn-success { background: var(--grad-success); }

Reduced motion — respecter les préférences

Pour les gradients animés, n'oubliez jamais la media query prefers-reduced-motion : certains utilisateurs souffrent de troubles vestibulaires aggravés par les animations de fond.

@media (prefers-reduced-motion: reduce) {
    .bg-shift,
    .conic-spinner {
        animation: none !important;
    }
}

FAQ — Questions fréquentes

Quelle est la différence entre linear-gradient et background-color ?

background-color n'accepte qu'une couleur unie (mots-clés, HEX, RGB, HSL). linear-gradient est une fonction d'image qui produit un dégradé entre deux couleurs ou plus. On l'utilise donc dans background-image ou la propriété raccourcie background, jamais dans background-color.

Peut-on animer un gradient CSS ?

Pas directement la propriété background (animation discrète, pas interpolée). En revanche, on peut animer background-position sur un gradient avec background-size: 200% 100% pour simuler un mouvement, ou faire pivoter un conteneur avec conic-gradient via transform: rotate() pour de très bonnes performances.

Comment combiner plusieurs gradients sur le même élément ?

Il suffit d'empiler les valeurs séparées par des virgules dans background. Le premier gradient déclaré apparaît au-dessus des suivants. Penser à utiliser de la transparence sur les couches supérieures pour laisser voir les couches inférieures :

background:
    linear-gradient(180deg, transparent, rgba(0,0,0,0.6)),  /* overlay sombre du bas */
    linear-gradient(135deg, #667eea, #764ba2);              /* base colorée */

Le conic-gradient est-il bien supporté en 2026 ?

Oui. conic-gradient est supporté depuis Chrome 69 (2018), Firefox 83 (2020), Safari 12.1 (2019) et Edge 79 (2020). En 2026, le support global dépasse 97 %. Pour les très anciens navigateurs, un fallback background-color ou radial-gradient peut être déclaré juste avant.

Comment générer un gradient sans bandes (banding) ?

Le banding apparaît lorsque la transition entre couleurs proches est trop progressive sur peu de pixels. Solutions : utiliser des couleurs plus contrastées, ajouter un léger bruit (noise via SVG ou pseudo-élément avec image PNG noise), ou activer le rendu en sRGB linéaire avec color-interpolation-method (CSS Color Module Level 4).

Peut-on utiliser un gradient comme couleur de texte ?

Oui, via la technique background-clip: text + color: transparent (préfixe -webkit- requis pour Safari) :

.gradient-text {
    background: linear-gradient(90deg, #ec4899, #f59e0b);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

Comment appliquer un gradient à une bordure ?

Utiliser la propriété border-image avec un gradient comme image source. Attention : le rendu n'est pas toujours parfait avec border-radius. Pour des bordures arrondies, préférer un pseudo-élément avec background en gradient et mask pour creuser l'intérieur :

.gradient-border {
    position: relative;
    border-radius: 12px;
    padding: 2px;
    background: linear-gradient(135deg, #ec4899, #f59e0b);
}
.gradient-border > * {
    background: #fff;
    border-radius: 10px;
}

Conclusion

Les dégradés CSS sont aujourd'hui un outil essentiel du designer web moderne : zéro requête réseau, vectoriels par nature, animables et compatibles avec tous les frameworks (Tailwind, SCSS, Angular, React). Maîtriser linear-gradient, radial-gradient et conic-gradient, ainsi que la subtilité des color stops et des color hints, permet de produire des arrière-plans, boutons, cartes et héros visuellement riches sans aucun fichier image.

Ce générateur interactif vous permet d'explorer rapidement les trois types de gradients, d'ajouter ou supprimer des color stops à la volée, de choisir parmi des presets professionnels et d'exporter le code dans le format adapté à votre stack (CSS pur, classes Tailwind, variables SCSS). N'hésitez pas à expérimenter avec les positions personnalisées et les overlays semi-transparents pour produire vos propres signatures visuelles.