Dégradés de couleurs CSS

Des dégradés prêts à l’emploi, chauds, froids, pastel, vifs ou sombres : copiez le code CSS ou ouvrez-les dans le créateur de dégradés.

affichées

Collections créées par KSPNAI, libres d’utilisation.

Gratuit · sans inscription

À propos de cet outil

Cette bibliothèque propose 70 dégradés de couleurs CSS prêts à l’emploi, créés par KSPNAI et libres d’utilisation. Ce sont des dégradés linéaires à deux ou trois couleurs, classés en sept thèmes : chauds, froids, pastel, vifs, sombres, nature et coucher de soleil. Ils conviennent pour un fond de site web, une bannière, un bouton ou un visuel pour les réseaux sociaux.

Chaque dégradé affiche un aperçu et ses codes HEX. Un clic sur Copier le CSS place dans le presse-papiers une ligne background: linear-gradient(…) à coller directement dans votre feuille de style. Pour changer l’angle, les couleurs ou exporter une image, cliquez sur Modifier : ses couleurs s’ouvrent dans le créateur de dégradés. Le thème filtré reste dans l’adresse de la page.

  • 70 dégradés linéaires à 2 ou 3 couleurs
  • 7 thèmes, des tons chauds aux sombres
  • Code CSS copié en un clic
  • Codes HEX de chaque couleur affichés
  • Modification dans le créateur de dégradés

Comment l’utiliser

  1. Choisissez un thème dans les filtres, ou restez sur Tous.
  2. Repérez un dégradé grâce à son aperçu.
  3. Cliquez sur Copier le CSS et collez le code dans votre feuille de style.
  4. Cliquez sur Modifier pour l’ajuster dans le créateur de dégradés.

Questions fréquentes

Quel code est copié exactement ?

Une déclaration CSS complète, par exemple background: linear-gradient(135deg, #c87023 0%, #30b075 100%); que vous pouvez coller telle quelle dans une règle CSS.

Puis-je utiliser ces dégradés librement ?

Oui, ce sont des collections créées par KSPNAI et libres d’utilisation, pour un site, une application ou un visuel.

L’outil est-il gratuit ?

Oui, gratuit et sans compte. Les dégradés sont intégrés à la page : rien n’est envoyé, la copie se fait dans votre presse-papiers.

Comment obtenir le dégradé en image PNG ?

Cliquez sur Modifier : ses couleurs s’ouvrent dans le créateur de dégradés, où vous réglez l’angle et le type de dégradé puis téléchargez une image PNG.

Outils associés

Voir les 57 outils gratuits →