Générateur de dégradé CSS

Générateur visuel de dégradés CSS linéaires, radiaux et coniques : ajoutez des points de couleur, ajustez l'angle et copiez le CSS. Parfait pour arrière-plans et boutons, gratuit dans le navigateur.

Répéter

각도: 135deg

Arrêt de couleur

100%

background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);

Intégrer

<iframe src="https://devtools.patrache.studio/fr/generators/css-gradient/?embed=1" width="100%" height="620"
  style="border:1px solid #e5e7eb;border-radius:12px" loading="lazy"
  title="Générateur de dégradé CSS — Patrache Studio DevTools"></iframe>
<p><a href="https://devtools.patrache.studio/fr/generators/css-gradient/">Générateur de dégradé CSS</a> by
   <a href="https://patrache.studio/">Patrache Studio</a></p>

Dernière mise à jour : 2026 · Outil en ligne gratuit

Qu'est-ce que Générateur de dégradé CSS ?

Comment utiliser

1
Sélectionner le type— Choisissez le type de dégradé (linéaire, radial, conique).
2
Ajuster les points de couleur— Ajustez la couleur et la position de chaque point de couleur.
3
Aperçu— Vérifiez le résultat en temps réel dans l'aperçu.
4
Copier le code CSS— Copiez le code CSS dans le presse-papiers avec le bouton 'Copier'.

Outils associés

Générateur CSS box-shadowGénérateur CSS box-shadow avec réglages de décalage, flou, étalement, couleur et inset, et aperçu en direct de l'ombre. Copiez le code box-shadow prêt à l'emploi, gratuit dans le navigateur.

Générateur CSS border-radiusGénérateur CSS border-radius avec huit poignées d'angle indépendantes, des curseurs et un aperçu en direct de la forme arrondie. Copiez le code border-radius prêt à l'emploi, gratuit dans le navigateur.

Convertisseur de couleursConvertisseur de couleurs entre codes HEX, RGB, HSL et OKLCH, avec le rapport de contraste WCAG de deux couleurs. Vérifiez l'accessibilité en choisissant votre palette, gratuit dans le navigateur.

Générateur de vagues SVGGénérateur de vagues SVG en ligne gratuit avec éditeur visuel pour des ondes fluides. Ajustez l'amplitude, les couleurs et les calques, appliquez des préréglages et copiez le code CSS et SVG pour vos arrière-plans.

Questions fréquentes

Il n'y a pas de limite, mais 2 à 6 est typique. Trop peuvent affecter les performances.

Oui. Activez la case à cocher 'Répéter' pour ajouter le préfixe repeating.

Cinq préréglages sont fournis : Sunset, Ocean, Forest, Midnight et Rainbow.

Actuellement, seul le CSS pur est produit. La conversion Tailwind est prévue pour une mise à jour future.

Non. Tout le traitement se fait dans le navigateur.