Bibliothèque de Fonds Dégradés
Parcourez plus de 110 fonds dégradés CSS sélectionnés et organisés par style : coucher de soleil, océan, forêt, feu, violet, pastel, sombre, néon, minimaliste, chaud et froid. Cliquez sur un dégradé pour copier instantanément la valeur CSS de fond prête à l'emploi. Gratuit, sans inscription.
Showing 110 of 110 gradients
Golden Hour
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunset Blaze
linear-gradient(135deg, #f83600 0%, #f9d42…
Dusk
linear-gradient(135deg, #fc4a1a 0%, #f7b73…
Amber Glow
linear-gradient(135deg, #f7971e 0%, #ffd20…
Horizon
linear-gradient(135deg, #ff6e7f 0%, #bfe9f…
Twilight
linear-gradient(135deg, #ee0979 0%, #ff6a0…
Peach Fuzz
linear-gradient(135deg, #ffb347 0%, #ffcc3…
Coral Reef
linear-gradient(135deg, #ff9a9e 0%, #fad0c…
Deep Sea
linear-gradient(135deg, #0f2027 0%, #203a4…
Aqua Splash
linear-gradient(135deg, #13547a 0%, #80d0c…
Tidal Wave
linear-gradient(135deg, #1a6dff 0%, #00d2f…
Lagoon
linear-gradient(135deg, #43c6ac 0%, #19165…
Seafoam
linear-gradient(135deg, #a8edea 0%, #fed6e…
Pacific
linear-gradient(135deg, #005c97 0%, #36379…
Maldives
linear-gradient(135deg, #00b4db 0%, #0083b…
Bali Blue
linear-gradient(135deg, #56ccf2 0%, #2f80e…
Emerald
linear-gradient(135deg, #11998e 0%, #38ef7…
Jungle
linear-gradient(135deg, #134e5e 0%, #71b28…
Moss
linear-gradient(135deg, #56ab2f 0%, #a8e06…
Rainforest
linear-gradient(135deg, #1d976c 0%, #93f9b…
Sage
linear-gradient(135deg, #b2d8b2 0%, #e8f5e…
Pine
linear-gradient(135deg, #2d6a4f 0%, #52b78…
Fern
linear-gradient(135deg, #74b49b 0%, #a7c5b…
Canopy
linear-gradient(135deg, #093028 0%, #237a5…
Inferno
linear-gradient(135deg, #f12711 0%, #f5af1…
Lava
linear-gradient(135deg, #200122 0%, #6f000…
Ember
linear-gradient(135deg, #eb5757 0%, #00000…
Phoenix
linear-gradient(135deg, #f7971e 0%, #e52d2…
Volcano
linear-gradient(135deg, #870000 0%, #190a0…
Wildfire
linear-gradient(135deg, #ff416c 0%, #ff4b2…
Torch
linear-gradient(135deg, #f46b45 0%, #eea84…
Magma
linear-gradient(135deg, #c94b4b 0%, #4b134…
Amethyst
linear-gradient(135deg, #9d50bb 0%, #6e48a…
Cosmic
linear-gradient(135deg, #20002c 0%, #cbb4d…
Lavender
linear-gradient(135deg, #e0c3fc 0%, #8ec5f…
Nebula
linear-gradient(135deg, #a18cd1 0%, #fbc2e…
Ultraviolet
linear-gradient(135deg, #4776e6 0%, #8e54e…
Plum
linear-gradient(135deg, #4b0082 0%, #9400d…
Orchid
linear-gradient(135deg, #da22ff 0%, #9733e…
Violet Haze
linear-gradient(135deg, #c471f5 0%, #fa71c…
Cotton Candy
linear-gradient(135deg, #ffecd2 0%, #fcb69…
Baby Blue
linear-gradient(135deg, #a1c4fd 0%, #c2e9f…
Blush
linear-gradient(135deg, #fbc2eb 0%, #a6c1e…
Mint Cream
linear-gradient(135deg, #d4fc79 0%, #96e6a…
Peach Sorbet
linear-gradient(135deg, #ffeaa7 0%, #fab1a…
Lilac
linear-gradient(135deg, #e0c3fc 0%, #d4a5f…
Powder Pink
linear-gradient(135deg, #ffd1dc 0%, #ffb3c…
Sky Mist
linear-gradient(135deg, #e0f7fa 0%, #b2ebf…
Midnight
linear-gradient(135deg, #0f0c29 0%, #302b6…
Obsidian
linear-gradient(135deg, #1a1a2e 0%, #16213…
Charcoal
linear-gradient(135deg, #232526 0%, #41434…
Void
linear-gradient(135deg, #000000 0%, #43434…
Abyss
linear-gradient(135deg, #000000 0%, #0f202…
Shadow
linear-gradient(135deg, #2c3e50 0%, #4ca1a…
Onyx
linear-gradient(135deg, #1a1a1a 0%, #2d2d2…
Eclipse
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Neon Pulse
linear-gradient(135deg, #00f260 0%, #0575e…
Electric
linear-gradient(135deg, #00c6ff 0%, #0072f…
Cyber
linear-gradient(135deg, #f953c6 0%, #b91d7…
Acid
linear-gradient(135deg, #b3ff00 0%, #00ff8…
Plasma
linear-gradient(135deg, #ff00cc 0%, #33339…
Laser
linear-gradient(135deg, #ff0099 0%, #49324…
Glitch
linear-gradient(135deg, #00ffff 0%, #ff00f…
Synthwave
linear-gradient(135deg, #fc00ff 0%, #00dbd…
Snow
linear-gradient(135deg, #e0e0e0 0%, #fffff…
Fog
linear-gradient(135deg, #d7d2cc 0%, #30435…
Ash
linear-gradient(135deg, #b8c6db 0%, #f5f7f…
Parchment
linear-gradient(135deg, #f5f0e8 0%, #e8dcc…
Linen
linear-gradient(135deg, #f5f5f0 0%, #e8e8e…
Slate
linear-gradient(135deg, #f8f9fa 0%, #e9ece…
Mist
linear-gradient(135deg, #f0f4f8 0%, #d9e2e…
Pearl
linear-gradient(135deg, #fdfbfb 0%, #ebede…
Honey
linear-gradient(135deg, #f6d365 0%, #fda08…
Caramel
linear-gradient(135deg, #d4a574 0%, #f4e4c…
Terracotta
linear-gradient(135deg, #c0392b 0%, #e67e2…
Autumn
linear-gradient(135deg, #d35400 0%, #f39c1…
Cinnamon
linear-gradient(135deg, #8b4513 0%, #d2691…
Saffron
linear-gradient(135deg, #f7971e 0%, #ffd20…
Maple
linear-gradient(135deg, #c94b4b 0%, #e67e2…
Butterscotch
linear-gradient(135deg, #f9d423 0%, #ff4e5…
Arctic
linear-gradient(135deg, #e8f4f8 0%, #a8d8e…
Glacier
linear-gradient(135deg, #b2d8d8 0%, #66a6f…
Steel
linear-gradient(135deg, #4b6cb7 0%, #18284…
Sapphire
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Frost
linear-gradient(135deg, #cfd9df 0%, #e2ebf…
Cerulean
linear-gradient(135deg, #2980b9 0%, #6dd5f…
Cobalt
linear-gradient(135deg, #0052d4 0%, #4364f…
Teal Dream
linear-gradient(135deg, #00b09b 0%, #96c93…
Aurora
linear-gradient(135deg, #00c9ff 0%, #92fe9…
Rainbow
linear-gradient(135deg, #ff0000 0%, #ff770…
Prism
linear-gradient(135deg, #f093fb 0%, #f5576…
Candy
linear-gradient(135deg, #f6d365 0%, #fda08…
Sunrise
linear-gradient(135deg, #f8b500 0%, #ff6b6…
Galaxy
linear-gradient(135deg, #0d0d0d 0%, #1a053…
Opal
linear-gradient(135deg, #a8edea 0%, #fed6e…
Holographic
linear-gradient(135deg, #f093fb 0%, #f5576…
Denim
linear-gradient(135deg, #1e3c72 0%, #2a69a…
Rosewood
linear-gradient(135deg, #ad5389 0%, #3c105…
Citrus
linear-gradient(135deg, #f7971e 0%, #ffd20…
Watermelon
linear-gradient(135deg, #ff6b6b 0%, #feca5…
Bubblegum
linear-gradient(135deg, #ff9a9e 0%, #fecfe…
Moonrise
linear-gradient(135deg, #3a1c71 0%, #d76d7…
Tropics
linear-gradient(135deg, #1fa2ff 0%, #12d8f…
Velvet
linear-gradient(135deg, #4a0072 0%, #7b1fa…
Champagne
linear-gradient(135deg, #f7e7ce 0%, #d4a96…
Midnight Blue
linear-gradient(135deg, #2c3e50 0%, #3498d…
Tangerine
linear-gradient(135deg, #f7971e 0%, #ff6b6…
Spearmint
linear-gradient(135deg, #1d976c 0%, #93f9b…
Dusty Rose
linear-gradient(135deg, #d4a5a5 0%, #f7d6d…
Indigo Night
linear-gradient(135deg, #1a1a2e 0%, #16213…
Pourquoi utiliser notre bibliothèque de fonds dégradés ?
- Copie instantanée en un clic : cliquez sur « Copier le CSS » sur n'importe quelle carte de dégradé et la propriété CSS background prête à l'emploi est copiée dans votre presse-papiers : collez-la directement dans votre feuille de styles, votre config Tailwind ou votre outil de design.
- Filtrage et recherche par style : parcourez plus de 110 dégradés par catégorie (coucher de soleil, océan, forêt, feu, violet, pastel, sombre, néon, minimaliste, chaud et froid) ou recherchez par nom, couleur ou mot-clé de style pour trouver instantanément le fond dégradé parfait.
- Sortie CSS prête pour la production : chaque fond dégradé de la bibliothèque est une valeur CSS valide utilisant la syntaxe standard linear-gradient(). Copiez-collez directement dans n'importe quel fichier CSS, CSS-in-JS, Tailwind ou style en ligne, sans modification.
- 100 % gratuit, sans inscription : la bibliothèque de fonds dégradés est entièrement gratuite, sans compte, sans inscription et sans limite d'utilisation. Tous les dégradés sont libres pour un usage personnel et commercial. Parcourez, copiez et publiez : sans conditions.
Cas d'usage courants de la bibliothèque de fonds dégradés
- Fonds de hero et de landing page : appliquez un fond dégradé à votre section hero, bannière CTA ou mise en page pleine page en quelques secondes. La bibliothèque vous fournit du CSS prêt pour la production à intégrer directement dans votre feuille de styles, sans outil supplémentaire.
- Cartes d'interface et séparateurs de section : utilisez des fonds dégradés pour séparer visuellement les sections, mettre en valeur des cartes de fonctionnalités ou donner de la profondeur à des tableaux de prix. Parcourez la bibliothèque par style : minimaliste pour des séparateurs discrets, néon pour des mises en avant audacieuses.
- Maquettes Figma et outils de design : copiez la valeur CSS de n'importe quel fond dégradé et collez-la directement dans Figma, Sketch ou Adobe XD comme remplissage. La bibliothèque vous évite de recréer les dégradés à la main dans votre outil de design.
- Visuels pour réseaux sociaux et marketing : créez des fonds accrocheurs pour publications sociales, miniatures YouTube et bannières d'en-tête d'e-mail avec les dégradés de la bibliothèque. Les catégories coucher de soleil, néon et océan sont particulièrement populaires pour les visuels marketing.
- Écrans de démarrage d'apps mobiles et PWA : utilisez les fonds dégradés de la bibliothèque pour les écrans de démarrage, les diapositives d'onboarding et les états de chargement. Les catégories sombre et minimaliste fonctionnent particulièrement bien pour les patterns d'interface mobile modernes.
- Présentations et diaporamas : appliquez des fonds dégradés à vos diapositives dans Google Slides, PowerPoint ou Keynote. La bibliothèque couvre toutes les ambiances, des dégradés minimalistes professionnels aux styles néon et coucher de soleil vibrants.
Qu'est-ce qu'un fond dégradé CSS ?
Un fond dégradé CSS est une transition fluide entre deux ou plusieurs couleurs rendue entièrement par le navigateur, sans fichier image. La bibliothèque de fonds dégradés utilise la fonction standard linear-gradient() de CSS, prise en charge par tous les navigateurs modernes. Comme les dégradés sont générés par le CSS, ils sont infiniment évolutifs, se chargent instantanément et n'ajoutent aucun octet à votre poids d'images, ce qui les rend idéaux pour un design web soucieux des performances.
Comment utiliser la bibliothèque de fonds dégradés
- Parcourez ou recherchez : utilisez les boutons de filtre par catégorie (coucher de soleil, océan, néon, etc.) ou la barre de recherche pour trouver un fond dégradé adapté à votre design.
- Copiez le CSS : cliquez sur le bouton « Copier le CSS » de n'importe quelle carte de dégradé. La déclaration complète background: linear-gradient(…); est copiée instantanément dans votre presse-papiers.
- Collez et publiez : collez le CSS du fond dégradé directement dans votre feuille de styles, la prop style de Tailwind, du CSS-in-JS ou votre outil de design. Aucune modification nécessaire : cela fonctionne immédiatement.
À quoi ressemble la sortie CSS
- Direction : tous les dégradés utilisent 135deg (diagonale haut-gauche vers bas-droite) par défaut, un angle très agréable. Vous pouvez changer l'angle dans votre propre CSS après la copie.
- Arrêts de couleur : la plupart des dégradés utilisent 2 à 3 arrêts définis en valeurs HEX. Les dégradés multi-arrêts (comme Rainbow et Holographic) en utilisent jusqu'à 7 pour des transitions plus riches.
- Syntaxe : la sortie utilise linear-gradient() standard, compatible avec tous les navigateurs modernes et préprocesseurs CSS (Sass, Less, PostCSS).
- Personnalisation : après la copie, vous pouvez ajuster l'angle, ajouter des arrêts de couleur ou combiner avec background-size et background-position pour des effets de dégradé animés.
Les catégories de la bibliothèque de fonds dégradés expliquées
La bibliothèque de fonds dégradés est organisée en 11 catégories de style pour trouver rapidement l'ambiance adéquate. Les dégradés coucher de soleil et chauds utilisent des oranges, des jaunes et des roses : idéals pour des designs énergiques et accueillants. Les dégradés océan et froids utilisent des bleus et des turquoises : parfaits pour des interfaces professionnelles et technologiques. Les dégradés sombres conviennent aux interfaces en mode sombre et aux sections hero dramatiques. Les dégradés néon sont très contrastés et vibrants : parfaits pour le gaming, le divertissement et un marketing audacieux. Les dégradés minimalistes sont subtils et neutres : idéals pour des fonds qui ne doivent pas concurrencer le contenu.
Foire aux questions
Une bibliothèque de fonds dégradés est une collection sélectionnée de fonds dégradés CSS que vous pouvez parcourir et copier en un clic. Cette bibliothèque contient plus de 110 valeurs linear-gradient() choisies à la main et organisées par style (coucher de soleil, océan, forêt, feu, violet, pastel, sombre, néon, minimaliste, chaud et froid), toutes prêtes à coller directement dans votre CSS.
Cliquez sur le bouton « Copier le CSS » d'une carte de dégradé. La déclaration CSS complète du fond est copiée dans votre presse-papiers. Collez-la dans votre feuille de styles, la prop style de Tailwind, du CSS-in-JS ou votre outil de design. Aucune modification n'est nécessaire.
Oui. Tous les dégradés de la bibliothèque utilisent la syntaxe standard linear-gradient() de CSS avec des valeurs de couleur. Vous pouvez utiliser librement n'importe quel dégradé dans des projets personnels et commerciaux, sans attribution.
Bien sûr. Tous les dégradés utilisent 135deg (diagonale) par défaut. Pour changer la direction, remplacez 135deg par n'importe quel angle : 0deg pour haut-bas, 90deg pour gauche-droite, ou tout autre angle. Le reste du CSS du dégradé reste identique.
CSS linear-gradient() ne peut pas être animé directement. La technique la plus courante consiste à utiliser background-size: 200% 200% et à animer background-position avec une règle @keyframes CSS. Le CSS de dégradé de cette bibliothèque sert de point de départ pour toute technique d'animation.
Oui. Utilisez le CSS copié comme prop style en ligne, ou ajoutez-le à votre tailwind.config.js dans theme.extend.backgroundImage. Tailwind v3+ prend aussi en charge les valeurs arbitraires : bg-[linear-gradient(135deg,_#f6d365,_#fda085)].
Totalement. La bibliothèque de fonds dégradés est un outil de référence statique : aucune saisie, aucun envoi de fichier, aucun traitement de données. Tout s'exécute localement dans votre navigateur. Aucune donnée n'est jamais envoyée à un serveur.
Copiez n'importe quel dégradé de la bibliothèque et appliquez-le à votre élément : .mon-element { background: linear-gradient(135deg, #f6d365 0%, #fda085 100%); }. Pour un fond pleine page, appliquez-le à l'élément body ou html.
Oui. CSS prend en charge plusieurs couches de fond séparées par des virgules. Utilisez des couleurs rgba() avec transparence sur le premier dégradé pour le mélanger sur le second : background: linear-gradient(135deg, rgba(246,211,101,0.8), rgba(253,160,133,0.8)), linear-gradient(45deg, #667eea, #764ba2);