Générateur Dégradé CSS en Ligne
Crée des dégradés CSS avec aperçu en temps réel. Sans installation, gratuit.
background: linear-gradient(135deg, #667eea, #764ba2);
Pourquoi l'utiliser
Des dégradés CSS parfaits en quelques secondes
Aperçu en temps réel
Tu vois le résultat pendant que tu ajustes les couleurs, les angles et les positions.
Code prêt pour la production
Syntaxe CSS moderne. Sans préfixes vendor inutiles.
Compatible avec tous les navigateurs
Vérifie la compatibilité et obtiens le code correct pour tes navigateurs cibles.
Sans installation
Tout dans le navigateur. Pas besoin de Figma, Sketch ou de plugins.
Comment ça marche
Trois étapes, sans complications
Choisis le type de dégradé
Sélectionne entre linear-gradient, radial-gradient ou conic-gradient. Chaque type dispose de ses propres contrôles spécifiques.
Configure les couleurs et les positions
Ajoute autant de color stops que tu veux. Ajuste l'angle, la position du centre et le pourcentage de chaque couleur avec les contrôles visuels.
Copie le code CSS
Le code CSS est généré en temps réel. Copie la propriété background complète, prête à coller dans ta feuille de styles.
FAQ
Des questions ?
Un dégradé linéaire (linear-gradient) effectue une transition entre des couleurs le long d'une ligne droite à un angle défini. Un dégradé radial (radial-gradient) rayonne depuis un point central vers l'extérieur en forme circulaire ou elliptique. Un dégradé conique (conic-gradient) effectue une transition autour d'un point central comme les aiguilles d'une montre — idéal pour créer des diagrammes circulaires ou des effets de couleurs tournantes en CSS pur.
Utilise rgba() ou le mot-clé transparent comme color stop. Par exemple : linear-gradient(to right, rgba(255,0,0,1), rgba(255,0,0,0)) crée un dégradé de rouge solide à rouge entièrement transparent. Évite d'utiliser transparent directement sur des fonds sombres car les navigateurs interpolent via le noir (rgba(0,0,0,0)), créant un artefact grisâtre indésirable.
Les dégradés linéaires et radiaux sont supportés par tous les navigateurs modernes depuis 2012 (Chrome 26+, Firefox 16+, Safari 6.1+, Edge 12+). Les dégradés coniques sont plus récents : supportés depuis Chrome 69 (2018), Firefox 83 (2020) et Safari 12.1 (2019). Pour les projets nécessitant le support d'IE11, les dégradés CSS n'ont pas de fallback natif — utilise des images SVG en alternative.
Ajoute plusieurs color stops : linear-gradient(45deg, #ff0000 0%, #ff7700 25%, #ffff00 50%, #00ff00 75%, #0000ff 100%). Contrôle la position exacte de chaque couleur avec des pourcentages ou des valeurs absolues (px, em). Si tu ne spécifies pas de positions, les couleurs sont réparties équitablement.
Les dégradés CSS sont générés par le GPU du navigateur et ne nécessitent aucune requête réseau, ce qui les rend considérablement plus efficaces que les images. Cependant, des dégradés CSS très complexes avec de nombreux color stops peuvent impacter le repaint de la page. Pour les dégradés animés, les performances peuvent se dégrader sur les appareils mobiles d'entrée de gamme — utilise plutôt transform ou opacity, qui sont des propriétés accélérées par GPU sans provoquer de reflow.
Dégradés CSS : histoire de la spécification W3C et techniques avancées
Les dégradés CSS ont une histoire de standardisation complexe. Les premières implémentations sont apparues sous forme d'extensions propriétaires : -webkit-gradient() dans Safari 4 (2008) avec une syntaxe complètement différente de la syntaxe actuelle. Mozilla a implémenté -moz-linear-gradient() dans Firefox 3.6 (2010). La syntaxe moderne, bien plus intuitive, a été introduite dans le module CSS Images Level 3 du W3C, atteignant le statut de Candidate Recommendation en 2011 et un support sans préfixes dans Chrome 26 et Firefox 16 en 2012. La fonction conic-gradient() a été proposée par Lea Verou en 2015 et standardisée dans CSS Images Level 4.
Les dégradés CSS sont entièrement rendus sur le GPU via la couche de composition du navigateur (compositor layer), contrairement aux images rasterisées qui nécessitent un décodage préalable en CPU. Cela les rend particulièrement efficaces pour les arrière-plans de grande surface. En interne, le moteur de rendu (Skia dans Chrome/Edge, WebRender dans Firefox) calcule l'interpolation des couleurs dans l'espace colorimétrique sRGB par défaut. CSS Color Level 4 introduit l'interpolation dans d'autres espaces de couleur (oklch, display-p3), permettant des dégradés perceptuellement plus uniformes sans bandes de couleur indésirables.
Une technique avancée est le dégradé en demi-teintes (gradient halftone), qui utilise plusieurs couches de background pour créer des motifs de points. Une autre consiste à utiliser les dégradés comme masques CSS avec mask-image: linear-gradient(), permettant de faire des fondus d'éléments sans JavaScript. Pour les effets de texte avec dégradé, on combine background-clip: text avec color: transparent — une technique popularisée dans le design UI moderne depuis 2015 et largement utilisée dans les interfaces d'Apple, Google et Meta. Les dégradés sont aussi la base du neumorphisme et du glassmorphisme, tendances de design dominantes entre 2019 et 2023.