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

Créez des dégradés CSS compatibles avec les navigateurs directement dans votre navigateur.

Live gradient preview
Customization

Color stops

Ready to use

CSS

90° linear
background: linear-gradient(90deg, #2A7B9B 0%, #57C785 50%, #EDDD53 100%);

Change a color to update the gradient.

Comment utiliser ceci ? generator

  1. Choisissez le mode linéaire ou radial, appliquez un préréglage ou modifiez chaque point de couleur, puis ajustez les positions et l'angle si nécessaire.
  2. Vérifier le résultat en direct et utiliser la fonction « Copier le résultat » pour le partager.

Comment… generator works

Les commandes d'aperçu en direct et d'arrêt génèrent une déclaration CSS standard sans préfixe pour l'arrière-plan, qui peut être copiée ou téléchargée.

Procédure pas à pas generation

  1. Choisissez le mode linéaire ou radial, appliquez un préréglage ou modifiez chaque point de couleur, puis ajustez les positions et l'angle si nécessaire.
  2. Les commandes d'aperçu en direct et d'arrêt génèrent une déclaration CSS standard sans préfixe pour l'arrière-plan, qui peut être copiée ou téléchargée.
  3. Vérifier le résultat affiché, puis le copier si nécessaire.

Exemple résolu

Un dégradé linéaire de 135 degrés permet de mélanger plusieurs points de couleur positionnés, par exemple le bleu à 0 %, le vert à 50 % et le jaune à 100 %.

Informations sur les risques

Foire aux questions

Cet outil envoie-t-il mes données saisies ?

Non. Le calcul interactif s'exécute dans votre navigateur et ce site ne transmet aucune donnée à un serveur.

Comment utiliser le résultat ?

Vérifier que les unités et les valeurs saisies correspondent à votre situation, notamment en ce qui concerne les dates, les ruptures de stock et l'arrondi.

Outils associés