Ce site utilise des statistiques de première main respectueuses de la vie privée pour savoir quelles pages et quels outils sont utiles. Aucune donnée n'est partagée avec des traceurs ou publicitaires tiers. Détails de confidentialité

Outils · CSS · Créer un dégradé CSS

Créer un dégradé CSS

Créez un dégradé CSS linéaire, radial ou conique, et copiez le code.

Votre résultat apparaît ici

Ajoutez un fichier et lancez l’outil.

Réglages

Ajustez les réglages ci-dessous. Le résultat se met à jour au fur et à mesure.

Déposez un fichier ici, ou choisissez-en un.

Fonctionne entièrement dans votre navigateur. Aucun fichier n'est envoyé.

Fonctionne entièrement dans votre navigateur. Rien n'est jamais envoyé à un serveur.

Comment ça marche

  1. Choisissez linéaire, radial ou conique, et réglez l'angle ou la position.

  2. Ajoutez ou retirez des étapes de couleur (de 2 à 8), puis utilisez les curseurs pour régler la position et l'opacité de chacune.

  3. Copiez le CSS généré.

Questions fréquentes

Linéaire, radial et conique, chacun avec jusqu'à 8 étapes de couleur.

Oui, le bouton Copier place la chaîne complète du dégradé dans votre presse-papiers, prête à coller.

Oui, lorsque votre navigateur prend en charge la fonction CSS oklch() - c'est détecté automatiquement et proposé seulement quand ça fonctionnera vraiment.

Non. Il n'y a aucun fichier à envoyer ici - le dégradé est généré et affiché entièrement dans votre navigateur.

Guides

Un aperçu plus précis de problèmes concrets que résout cet outil.

5 min de lecture

Why Hand-Writing a CSS Gradient Rarely Looks Like What You Pictured

linear-gradient(135deg, #ff7a59, #ffd166) tells you nothing about what it looks like until it renders. Here's why gradient syntax is genuinely hard to picture in your head, and what actually helps.

Lire le guide 5 min de lecture

How to Build a Radial Gradient in CSS Without Guessing Positions

Radial gradients spread color out from a point instead of across a line - useful for spotlight effects, glows, and vignettes. Here's how to build one and actually control where it centers.

Lire le guide 5 min de lecture

What a CSS Gradient Fallback Color Actually Does (and Why It's There)

Every copied gradient comes with a plain background: #hex; line above the gradient itself. Here's what it's actually protecting against, and why it's still worth keeping even on a modern site.

Lire le guide

Outils similaires

Générer une palette de couleurs

Générez une palette de couleurs, verrouillez les nuances que vous aimez, et mélangez le reste.

 Convertisseur de couleurs

Convertissez une couleur entre HEX, RGB, HSL et OKLCH, en direct.

 Créer une ombre CSS

Créez une ombre CSS multicouche (box-shadow) avec un aperçu en direct, puis copiez le code.

 Créer un effet glassmorphism

Créez une carte en verre dépoli avec flou d'arrière-plan, transparence et bordure douce, et copiez le CSS.

 Vérifier le contraste des couleurs

Vérifiez si deux couleurs respectent les exigences de contraste WCAG pour le texte et l'interface.

 Générateur de clip-path

Créez une forme de découpe CSS clip-path - polygone, cercle, ellipse ou rectangle intérieur - avec un aperçu en direct, et copiez le code.

Commentaires

  1. Aucun commentaire pour le moment. Soyez le premier à partager votre expérience.
Votre note (facultatif)

Aucune note sélectionnée