Preview
de dégradé CSS
Commandes
Préréglages
dégradés
Explorez ces superbes exemples de dégradés et laissez-vous inspirer pour votre prochain projet. Cliquez sur n’importe quel dégradé pour le charger dans le générateur.
Sunset Blush
Un dégradé chaleureux inspiré des magnifiques couchers de soleil.
Brise océanique
Un dégradé calme évoquant la sensation des eaux côtières.
Mint Fusion
Un dégradé frais et moderne combinant menthe et bleu ciel.
Jardin
Un dégradé vibrant représentant la beauté de la nature.
Cosmic Dream
Un dégradé magique inspiré du ciel nocturne.
Golden Hour
Un dégradé chaleureux qui capture l’essence du crépuscule.
de gradient Documentation
Qu’est-ce qu’un dégradé CSS ?
Les dégradés CSS vous permettent d’afficher des transitions fluides entre deux couleurs ou plus. Ils peuvent être utilisés comme arrière-plans pour des éléments et sont disponibles en trois types différents :
- Dégradés linéaires :Couleurs de transition le long d’une ligne droite.
- Dégradés radiaux :faites la transition des couleurs à partir d’un point central vers l’extérieur.
- Dégradés coniques :Transitions de couleurs autour d’un point central dans un cercle.
Une
fois que vous avez généré un dégradé à l’aide de notre outil, vous pouvez utiliser le code CSS dans vos projets :
- Copiez le code CSS à partir du générateur.
- Collez-le dans votre fichier CSS ou utilisez-le en ligne dans vos éléments HTML.
- Appliquez le dégradé à n’importe quel élément à l’aide
backgroundproperty.
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
- plus de deux couleurs pour un effet de dégradé plus complexe.
- Ajustez les positions des couleurs pour contrôler l’endroit où les transitions se produisent.
- Combinez plusieurs dégradés pour des effets encore plus créatifs.
- Pour les dégradés coniques, changer le centre crée des motifs intéressants.
- Enregistrez vos dégradés préférés pour une utilisation ultérieure.
Les
dégradés CSS sont largement pris en charge par les navigateurs modernes. Cependant, les navigateurs plus anciens comme Internet Explorer peuvent ne pas les afficher correctement. Fournissez toujours une couleur de repli :À
background: #4F46E5; /* Fallback color */
background: linear-gradient(135deg, #4F46E5, #8B5CF6);
}
Chrome
26+
Firefox
16+
Safari
6.1+
Edge
12+
propos de cet outil
Notre générateur de dégradés CSS est conçu pour aider les développeurs et les concepteurs à créer de beaux dégradés sans effort. Que vous travailliez sur un site Web, une application ou que vous souhaitiez simplement expérimenter avec les couleurs, cet outil vous permet de générer facilement le dégradé parfait pour votre projet.
Features
Facile à utiliser
Interface intuitive pour la création de dégradés.
Fonctionne
parfaitement sur toutes les tailles d’écran.
Copier-coller Prêt
Obtenez instantanément du code CSS propre.
Préréglages disponibles
Commencez par de beaux dégradés prédéfinis.
Related Tools
Générateur de barres de défilement CSS
Personnalisez facilement les barres de défilement de votre site WebCréez de superbes effets de texte dégradé pour votre site Web
Convertisseur de stylet en CSS
Rapide, facile et sécurisé.
Convertisseur SCSS en CSS
Transformez votre code SCSS en CSS. Rapide, facile et sécurisé.
Calculateur de hachage Whirlpool
Obtenez des statistiques détaillées sur votre texte grâce à notre outil de comptage de mots précis.
Convertisseur de stylet en CSS
Rapide, facile et sécurisé.