T

Text Machine

Des outils de texte puissants, dans votre navigateur

Générateur de Dégradés CSS

Concevez des dégradés CSS linéaires et radiaux avec un aperçu en direct. Ajoutez des arrêts de couleur, réglez l'angle et copiez un CSS d'arrière-plan propre, le tout dans votre navigateur.

Aperçu
Dégradé

Angle

90°

Arrêts de couleur

#f5530c

%

#ffa94d

%

CSS

background: linear-gradient(90deg, #f5530c 0%, #ffa94d 100%);

Comment utiliser Générateur de Dégradés CSS

  1. 1

    Choisissez un type de dégradé

    Basculez entre Linéaire et Radial. Le dégradé linéaire vous permet en plus de définir la direction avec le curseur d'angle, exprimé en degrés.

  2. 2

    Ajoutez et colorez vos arrêts

    Cliquez sur un échantillon pour choisir chaque couleur et réglez sa position de 0 à 100 pour cent. Utilisez Ajouter un arrêt de couleur pour des mélanges multicolores, ou supprimez un arrêt pour simplifier.

  3. 3

    Prévisualisez en direct

    Le panneau d'aperçu affiche votre dégradé exactement tel qu'il s'affichera dans un navigateur, et se met à jour à chaque modification que vous effectuez.

  4. 4

    Copiez le CSS

    Copiez la ligne d'arrière-plan générée et collez-la dans votre feuille de style. C'est du CSS standard qui fonctionne dans tous les navigateurs modernes.

Questions fréquentes

Comment créer un dégradé CSS ?
Choisissez linéaire ou radial, réglez l'angle et ajoutez autant d'arrêts de couleur que vous le souhaitez. L'aperçu se met à jour en direct et le CSS prêt à l'emploi apparaît en dessous sous la forme d'une propriété background que vous pouvez copier directement dans votre feuille de style.
Quelle est la différence entre un dégradé linéaire et un dégradé radial ?
Un dégradé linéaire fond les couleurs le long d'une ligne droite, et vous contrôlez sa direction avec l'angle en degrés. Un dégradé radial les fond vers l'extérieur en cercle depuis le centre. Les deux utilisent les mêmes arrêts de couleur ; seule la forme du fondu change.
Que sont les arrêts de couleur ?
Un arrêt de couleur est une couleur associée à une position de 0 à 100 pour cent le long du dégradé. Deux arrêts donnent un simple fondu entre deux couleurs, tandis qu'en ajouter davantage vous permet de créer de riches dégradés multicolores. Modifiez la valeur de position pour déplacer l'endroit où se place chaque couleur.
Comment utiliser le dégradé dans mon projet ?
Copiez la ligne générée et collez-la comme propriété background de n'importe quel élément, par exemple un div ou une section. Comme il s'agit de CSS pur, cela fonctionne dans tous les navigateurs modernes, sans images ni bibliothèques.
Mes données sont-elles envoyées à un serveur ?
Non. Tout s'exécute entièrement dans votre navigateur. Rien de ce que vous créez n'est envoyé, enregistré ni stocké : votre travail reste donc totalement privé et l'outil continue de fonctionner même hors ligne.

Outils similaires

Continuez avec ces outils pratiques

Convertisseur HTML vers Texte

Formateur JSON

Testeur de Regex

Décodeur de JWT

Générateur d'Ombres CSS

Convertisseur de Texte en HTML