Générateur de Dégradés CSS
Créez de superbes dégradés CSS visuellement. Générez des dégradés linéaires, radiaux et coniques avec plusieurs arrêts de couleur, angles et positions. Copiez instantanément du code CSS prêt pour la production.
Qu'est-ce qu'un dégradé CSS ?
Un dégradé CSS est une valeur d'image CSS qui affiche des transitions fluides entre deux ou plusieurs couleurs sans utiliser de fichiers image. Les dégradés sont rendus par le navigateur, ce qui les rend indépendants de la résolution et très performants.
Quels types de dégradés CSS sont pris en charge ?
Ce générateur prend en charge trois types : linear-gradient (couleurs le long d'une ligne droite), radial-gradient (couleurs rayonnant depuis le centre) et conic-gradient (couleurs tournant autour d'un point central comme une horloge).
Quelle est la différence entre dégradés linéaires et radiaux ?
Les dégradés linéaires font transitionner les couleurs le long d'une ligne droite définie par un angle ou un mot-clé de direction. Les dégradés radiaux font transitionner les couleurs vers l'extérieur depuis un point central en formes circulaires ou elliptiques.
Combien d'arrêts de couleur puis-je utiliser ?
Vous pouvez utiliser autant d'arrêts de couleur que nécessaire. Chaque arrêt définit une couleur et optionnellement une position (0% à 100%) le long de la ligne de dégradé. Plusieurs arrêts créent des transitions complexes multicolores.
Comment utiliser le code CSS généré ?
Copiez le code CSS généré et collez-le comme valeur de la propriété background ou background-image dans votre feuille de style CSS. Le code fonctionne dans tous les navigateurs modernes.
Que sont les arrêts de couleur dans les dégradés ?
Les arrêts de couleur définissent des couleurs spécifiques à des positions spécifiques le long de la ligne de dégradé. Par exemple, "red 0%, blue 50%, green 100%" crée un dégradé qui commence rouge, transitionne vers le bleu au milieu et finit vert.
Puis-je créer des dégradés inclinés ?
Oui, les dégradés linéaires prennent en charge les valeurs d'angle de 0deg à 360deg. Vous pouvez aussi utiliser des mots-clés de direction comme "to right", "to bottom", "to top left" pour les angles courants.
Les dégradés CSS sont-ils responsifs ?
Oui, les dégradés CSS sont intrinsèquement responsifs car ils sont vectoriels et rendus par le navigateur. Ils s'adaptent parfaitement à toute taille de conteneur sans perte de qualité ni augmentation de taille de fichier.
Les dégradés CSS affectent-ils les performances ?
Les dégradés CSS sont généralement très performants. Ils éliminent les requêtes HTTP pour les fichiers image et sont accélérés matériellement. Cependant, des dégradés extrêmement complexes peuvent affecter le rendu sur les appareils bas de gamme.
Puis-je utiliser des dégradés pour les arrière-plans et bordures ?
Oui, les dégradés peuvent être utilisés pour background-image, border-image, mask-image et toute propriété acceptant des valeurs d'image CSS. Ils fonctionnent partout où une valeur d'image est attendue.
Quels navigateurs prennent en charge les dégradés CSS ?
Tous les navigateurs modernes prennent en charge les dégradés CSS, y compris Chrome, Firefox, Safari, Edge et Opera. Le support est excellent depuis IE10. Les préfixes vendeurs ne sont plus nécessaires.
Comment créer un dégradé répétitif ?
Utilisez repeating-linear-gradient ou repeating-radial-gradient au lieu des versions standard. Ceux-ci répètent le motif de dégradé pour remplir tout l'élément, créant des effets de rayures ou de motifs.
Puis-je animer les dégradés CSS ?
Les dégradés CSS ne peuvent pas être animés directement avec les transitions CSS. Cependant, vous pouvez animer background-position, background-size ou utiliser des propriétés CSS personnalisées avec @property pour créer des effets d'animation.
Ce générateur de dégradés est-il gratuit ?
Oui, ce générateur de dégradés CSS est entièrement gratuit. Aucune inscription requise, pas de limites d'utilisation, et tout le code généré est le vôtre pour utiliser dans n'importe quel projet sans attribution.
Comment utiliser Générateur de Dégradés CSS
Composez des dégradés CSS à l'œil et copiez instantanément un CSS prêt pour la production. Le rendu s'effectue localement dans votre navigateur, sans aucun envoi.
- Sélectionnez le Type de dégradé : linear-gradient ou radial-gradient.
- Réglez l'Angle pour les dégradés linéaires, ou choisissez une Shape telle que circle ou ellipse pour les radiaux.
- Ajoutez, recolorez et déplacez des points de couleur dans la section Color Stops.
- Cliquez sur une pastille sous Presets pour partir d'un mélange tout fait.
- Copiez le CSS généré et collez-le dans votre feuille de style.
Placez deux points de couleurs différentes à la même position pour obtenir un bord net — idéal pour créer des rayures sans images.
Outils associés
- Générateur de Box Shadow CSS Générateur en ligne gratuit de box-shadow CSS. Créez visuellement de belles ombres avec décalage, flou, étalement, couleur et inset ajustables. Aperçu en direct et copie instantanée.
- Générateur de Border Radius CSS Générateur visuel de border-radius CSS. Ajustez chaque coin indépendamment avec aperçu en temps réel et copiez le code CSS instantanément.
- Générateur CSS Grid Générateur visuel gratuit de CSS Grid avec aperçu en direct. Concevez des grilles responsives interactivement et exportez du code CSS prêt pour la production.
- Générateur CSS Flexbox Générateur visuel CSS Flexbox avec aperçu en direct. Ajustez les propriétés flex et obtenez du code CSS prêt à l'emploi.
- Générateur de Border Radius Générateur de border radius créatif gratuit en ligne. Déplacez 8 poignées ou choisissez un blob pour créer des formes CSS organiques et copier le code aussitôt.
- Convertisseur de Couleur Convertisseur de couleur en ligne gratuit. Convertissez les formats HEX, RGB, HSL, HSV instantanément avec sélecteur visuel. 100% privé, fonctionne dans votre navigateur.
- Générateur d'Easing CSS Générateur en ligne gratuit d'easing CSS. Déplacez les points de contrôle du cubic-bezier sur une courbe interactive, choisissez parmi 18 préréglages, regardez une animation de balle en boucle et copiez la fonction de temporisation instantanément.
- Générateur de Text Shadow CSS Générateur en ligne gratuit de text-shadow CSS. Empilez plusieurs couches d'ombre avec décalage, flou, couleur et opacité, essayez des préréglages Néon, 3D ou Rétro et copiez le CSS instantanément.