Passer au contenu principal

Générateur de dégradé CSS avec code prêt à copier

Générez et personnalisez vos dégradés CSS en quelques secondes. Que vous ayez besoin d'un linear-gradient pour un bouton, d'un radial-gradient pour un fond élégant ou d'un conic-gradient pour un effet moderne, notre outil vous offre une prévisualisation temps réel. Compatible avec tous les navigateurs, notre code généré inclut automatiquement les préfixes nécessaires (webkit) et est optimisé pour des performances web maximales.

Aperçu en temps réel
°
background-image
background (shorthand)
CSS Variable

Dégradés prédéfinis

Tout ce que vous pouvez faire avec ce générateur CSS

Ce générateur de dégradé CSS en ligne vous permet de créer facilement tous types de dégradés : linear-gradient, radial-gradient, conic-gradient et leurs variantes répétées. Copiez le CSS généré en un clic et intégrez-le directement dans votre projet.

Linear gradient CSS

Le linear-gradient() crée un dégradé le long d'une ligne droite selon un angle défini. Vous pouvez choisir l'angle avec la boussole visuelle ou les raccourcis directionnels, puis ajuster autant d'arrêts de couleur que nécessaire avec position et opacité personnalisables.

Radial et conic gradient

Le radial-gradient() rayonne depuis un point central, utile pour les effets de lumière ou de profondeur. Le conic-gradient() tourne autour d'un point, parfait pour les graphiques en camembert et les effets dégradés rotatifs.

Variables CSS et préfixes webkit

Activez l'option var() pour générer une variable CSS réutilisable dans tout votre projet. Activez -webkit- pour une compatibilité avec les anciens navigateurs Safari et Chrome.

Questions fréquentes

Les dégradés CSS sont plus légers (pas de requête HTTP), redimensionnables à l'infini sans perte de qualité et permettent des transitions dynamiques via le Java... Les dégradés CSS sont plus légers (pas de requête HTTP), redimensionnables à l'infini sans perte de qualité et permettent des transitions dynamiques via le JavaScript ou les animations CSS.

Oui, notre générateur inclut les standards CSS modernes ainsi que les préfixes vendeurs (ex: -webkit-gradient) pour garantir une compatibilité optimale sur Chro... Oui, notre générateur inclut les standards CSS modernes ainsi que les préfixes vendeurs (ex: -webkit-gradient) pour garantir une compatibilité optimale sur Chrome, Firefox, Safari et Edge.

Outils de la même catégorie

Encodeur / Décodeur URL Minifieur CSS / JS / HTML Générateur de Favicon Convertisseur HEX / RGB / HSL Convertisseur binaire/décimal/hexadécimal Visualiser code HTML en ligne JSON Formatter Online Base64 Encoder Decoder

Outils populaires

Calculateur Matériaux Calculateur Pente Toiture Générateur Planning Travaux Simulateur Coût Rénovation Calculateur Coût Embauche