ZenovayTools

Générateur de gradient CSS

Créez de beaux gradients CSS avec un éditeur visuel. Gradients linéaires, radiaux et coniques.

135deg
0%
100%
CSS
background: linear-gradient(135deg, #6366f1 0%, #ec4899 100%);

Comment utiliser Générateur de gradient CSS

  1. 1Choisissez le type de gradient : linéaire, radial ou conique.
  2. 2Ajoutez des points de couleur et ajustez leurs positions sur la barre de gradient.
  3. 3Définissez l'angle ou la direction du gradient.
  4. 4Prévisualisez le gradient en temps réel sur le canevas.
  5. 5Copiez le code CSS généré en un clic.
ZenovayAnalytics

Sachez ce que vos visiteurs font vraiment.

  • Suivi des visiteurs en temps réel
  • Vie privée d'abord, sans bandeau cookies
  • Installé en deux minutes
Découvrir Zenovay

Outils connexes

Générateur d'Ombre de Boîte CSS
Concevez des ombres de boîte CSS avec des contrôles visuels. Ajustez le décalage, le flou, l'étalement et la couleur.
Générateur de Rayon de Bordure CSS
Créez des valeurs de rayon de bordure personnalisées avec des contrôles visuels. Liez ou dissociez les coins pour un ajustement rapide.
Zone de jeu CSS Flexbox
Apprenez et générez des mises en page CSS Flexbox visuellement. Ajustez la direction, l'alignement, l'enveloppe et l'écart en temps réel.
Générateur de grille CSS
Construisez des mises en page CSS Grid avec un éditeur visuel. Définissez les colonnes, les lignes, les espacements et l'étendue des cellules.

Questions fréquemment posées

Quels types de dégradés sont supportés ?▾
L'outil supporte les dégradés linéaires (avec angle réglable) et les dégradés radiaux (cercle). Vous pouvez ajouter plusieurs arrêts de couleur pour créer des dégradés complexes.
Comment ajouter plus de couleurs ?▾
Cliquez sur le bouton « Ajouter un arrêt de couleur » pour ajouter une nouvelle couleur. Chaque arrêt dispose d'un sélecteur de couleur et d'un curseur de position (0-100%). Vous pouvez ajouter jusqu'à 10 arrêts de couleur.
Peut-on copier le code CSS ?▾
Oui. Le code CSS généré est affiché sous l'aperçu et peut être copié en un clic. Il produit du CSS standard qui fonctionne dans tous les navigateurs modernes.
Génère-t-il des préfixes propriétaires ?▾
Non. Les navigateurs modernes (Chrome, Firefox, Safari, Edge) supportent tous les dégradés CSS sans préfixe. Les préfixes propriétaires ne sont plus nécessaires.
Peut-on utiliser cet outil sur téléphone ?▾
Oui, le générateur de dégradés fonctionne dans tout navigateur mobile moderne. Ajustez les couleurs, positions et angles avec les commandes tactiles et copiez le CSS sur n'importe quel appareil.
Fonctionne-t-il avec Tailwind CSS ou d'autres frameworks ?▾
Oui. L'outil génère des propriétés CSS background standard qui fonctionnent avec n'importe quel framework. Dans Tailwind, vous pouvez utiliser la syntaxe de valeur arbitraire comme bg-[linear-gradient(...)] ou appliquer le CSS directement aux classes personnalisées.
Quel est le nombre maximum d'arrêts de couleur ?▾
Vous pouvez ajouter jusqu'à 10 arrêts de couleur par dégradé. Chaque arrêt dispose d'une couleur et d'une position réglables (0-100%), vous donnant un contrôle précis sur la transition du dégradé.