Générateur de dégradés CSS
Créez des dégradés CSS avec aperçu en direct.
Presets:
background: linear-gradient(135deg, #D94F30, #0D7C66);Qu'est-ce qu'un degrade CSS ?
Un degrade CSS est une transition fluide entre deux ou plusieurs couleurs appliquee comme arriere-plan a des elements HTML. C'est l'une des proprietes les plus polyvalentes du design web moderne, permettant de creer des arriere-plans attrayants et professionnels sans images. Les degrades reduisent le poids de la page en eliminant la dependance aux fichiers graphiques, ameliorent les temps de chargement et s'adaptent parfaitement a toute resolution d'ecran, y compris les ecrans Retina et haute densite de pixels.
Il existe deux types principaux de degrades CSS : lineaires et radiaux. Les degrades lineaires creent une transition de couleur le long d'une ligne droite, definie par un angle (par exemple, de haut en bas, en diagonale ou dans n'importe quelle direction personnalisee). Les degrades radiaux, en revanche, irradient depuis un point central vers l'exterieur de maniere circulaire ou elliptique, creant des effets d'eclairage et de profondeur tres utilises dans les interfaces modernes.
Les degrades CSS sont compatibles avec tous les navigateurs modernes, y compris Chrome, Firefox, Safari, Edge et Opera. Notre generateur de degrades vous permet d'experimenter avec les couleurs, les angles et les types en temps reel, generant automatiquement le code CSS pret a etre copie et colle dans votre projet web.
Questions fréquentes
Fonctionne-t-il dans tous les navigateurs ?
Oui. Les degrades CSS sont compatibles avec tous les navigateurs modernes sans prefixe de fournisseur. Chrome, Firefox, Safari, Edge et Opera les prennent en charge nativement. Seuls les navigateurs tres anciens comme Internet Explorer 9 ou inferieur ne les prennent pas en charge.
Puis-je utiliser plus de 2 couleurs ?
Oui, CSS permet des degrades avec plusieurs arrets de couleur. Bien que notre generateur fonctionne avec 2 couleurs pour simplifier l'interface, vous pouvez modifier manuellement le code resultant pour ajouter des couleurs supplementaires en les separant par des virgules dans la declaration du degrade.
Comment utiliser le code genere ?
Copiez simplement le code CSS en cliquant sur le bouton « Copier » et collez-le dans la propriete de style de l'element HTML souhaite. Vous pouvez l'utiliser dans une feuille de style CSS, dans un attribut style inline, ou dans des frameworks comme Tailwind CSS ou styled-components.
Envie d'en savoir plus ? Lisez notre guide complet →