Command Palette

Search for a command to run...

Générateur de gradient CSS

Créez de beaux dégradés CSS avec un aperçu en direct

%
%
CSS ClassCSS
.gradient {
  background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
}
Inline StyleCSS
background: linear-gradient(to right, #667eea 0%, #764ba2 100%);
Category:css
Mode:Offline
Version:1.0.0
Access:Free

Qu'est-ce que le générateur de gradient CSS ?

CSS Gradient Generator interface on Toolz.dev - Create beautiful CSS gradients with live preview

CSS Gradient Generator est un outil en ligne gratuit qui vous permet de créer de beaux dégradés CSS avec une interface visuelle et un aperçu en direct. Il prend en charge les types de dégradés linéaires, radiaux et coniques, vous permettant de concevoir de superbes transitions de couleurs pour les arrière-plans de sites Web, les boutons, les cartes et d'autres éléments d'interface utilisateur.

L'outil fournit une interface intuitive par glisser-déposer pour ajouter et positionner des arrêts de couleur, ajuster la direction et l'angle du gradient et l'opacité de réglage fin. Vous pouvez voir exactement à quoi ressemblera votre dégradé en temps réel, ce qui vous permettra d'expérimenter facilement différentes combinaisons de couleurs jusqu'à ce que vous ayez obtenu le résultat parfait.

Une fois que vous êtes satisfait de votre dégradé, copiez simplement le code CSS généré et collez-le dans votre feuille de style. L'outil produit des CSS propres et compatibles entre les navigateurs qui fonctionnent dans tous les navigateurs modernes. Aucune expertise en matière de conception ou de codage n'est nécessaire pour créer des dégradés d'apparence professionnelle.

Une chose à savoir sur la façon dont les navigateurs dessinent des dégradés : les couleurs sont interpolées en sRGB, ce qui n'est pas même sur le plan perceptuel Le mélange de deux couleurs fortement opposées, le bleu au jaune étant le cas classique, fait passer le milieu par un gris désaturé que ni la couleur de fin ne suggère Les correctifs habituels sont d'ajouter un arrêt au milieu pour orienter le chemin, ou de choisir les couleurs de fin plus proches sur la roue La répétition d'un arrêt à la même position produit un bord dur plutôt qu'un mélange, c'est ainsi que les effets de bande et de bande sont construits Les préfixes de fournisseur ne sont plus nécessaires pour les dégradés standard dans tout navigateur recevant encore des mises à jour, de sorte que la sortie la sortie la sortie la sortie la sortie la plus courte est aussi compatible. Les gradients sont peints avec une boîte.

Comment utiliser le générateur de gradient CSS ?

1

Choisissez le type de dégradé

Sélectionnez entre les types de gradient linéaire, radial ou conique. Chaque type crée un type différent d'effet de transition de couleur.

2

Ajouter des arrêts de couleur

Cliquez pour ajouter des arrêts de couleur et choisissez les couleurs pour chaque arrêt. Faites-les glisser pour ajuster leur position le long du gradient.

3

Ajuster la direction et l'angle

Définissez la direction ou l'angle du gradient pour les dégradés linéaires ou la position centrale des dégradés radiaux afin de contrôler le flux des couleurs.

4

Copiez le code CSS

Copiez le code CSS généré en un clic et collez-le directement dans votre feuille de style. Le code est prêt à être utilisé dans n'importe quel projet Web.

Principales caractéristiques

Sortie de classe et en ligne

Le gradient est émis à la fois comme règle CSS et comme déclaration d'arrière-plan nu pour un style en ligne, chacun avec son propre bouton de copie

Plusieurs types de dégradés

Créez des dégradés linéaires, radiaux et coniques avec un contrôle total sur la direction, l'angle et la forme

Aperçu visuel en direct

Affichez votre mise à jour de dégradé en temps réel lorsque vous ajustez les couleurs, les arrêts et les directions

Copie CSS en un clic

Copiez le code CSS de nettoyage et de navigateurs multi-navigants prêt à coller dans vos feuilles de style

Frequently Asked Questions

Définissez la propriété d'arrière-plan sur une fonction de gradient : arrière-plan : gradient linéaire (90 deg, #ff0000, #0000ff). La première valeur est la direction (un angle tel que 90deg, ou un mot-clé tel que "à droite"), et tout après qu'il y ait une liste de couleurs s'arrête. Créez le dégradé visuellement ici et copiez la déclaration terminée directement dans votre feuille de style.

Comments

0 comments

0/2000 characters

No comments yet. Be the first to share your thoughts!

cssgradientlinearradialconiccolorbackgroundgenerator