Tool overview
Qu'est-ce que Générateur de dégradé CSS ?
Générateur de dégradé CSS est un outil qui vous aide à concevoir des dégradés CSS multi-arrêts linéaires, radiaux et coniques avec OKLCH et export Tailwind.
Pourquoi utiliser Générateur de dégradé CSS ?
Il améliore la lisibilité et accélère votre flux lorsque vous devez concevoir des dégradés CSS multi-arrêts linéaires, radiaux et coniques avec OKLCH et export Tailwind, sans envoi de données vers un serveur.
Fonctionnalités clés
Confidentialité côté client, résultats instantanés et copie en un clic pour générateur de dégradé CSS. concevoir des dégradés CSS multi-arrêts linéaires, radiaux et coniques avec OKLCH et export Tailwind
Mode d'emploi
Suivez ces étapes pour obtenir des résultats précis avec l'outil ci-dessus.
- Choisissez linéaire, radial ou conique et ajoutez des arrêts de couleur sur l’aperçu en direct.
- Réglez l’angle ou la position du centre, activez OKLCH pour des mélanges plus doux et comparez au sRGB si besoin.
- Copiez le CSS, des classes Tailwind arbitraires ou des propriétés CSS — ou un lien de partage pour restaurer le dégradé plus tard.
- Collez une déclaration background: linear-gradient(...) dans Importer CSS pour reconstruire les arrêts.
- Ouvrez Convertisseur de couleur ou Contraste WCAG depuis Outils liés pour valider les couleurs.
Guide du générateur de dégradé CSS : linear-gradient, OKLCH, conique et Tailwind
Utilisez ce générateur gratuit pour construire du CSS linear-gradient, radial-gradient et conic-gradient multi-arrêts avec interpolation OKLCH (CSS Color 4), replis @supports, classes Tailwind et URL partageables.
Dégradés linéaires
Angle en degrés avec arrêts de couleur illimités, positions et opacité. Interpolation optionnelle in oklch.
Dégradés radiaux
Cercle ou ellipse depuis un centre en pourcentage avec rampes multi-arrêts.
Dégradés coniques
Balayage des couleurs autour d’un centre avec from-angle pour camemberts et arcs-en-ciel.
Couleur et opacité multi-arrêts
Ajoutez, retirez, inversez ou randomisez les arrêts ; importez un CSS background collé.
Interpolation couleur OKLCH
Mélanges perceptuels par défaut avec repli sRGB via @supports pour les anciens navigateurs.
CSS, Tailwind et variables CSS
Exportez le CSS d’arrière-plan, des classes Tailwind arbitraires ou des propriétés :root.
URL partageables et import CSS
Synchronisez la config dans ?g= / #g= et restaurez depuis un CSS de dégradé collé.
Passage accessibilité
Liens profonds des arrêts vers Contraste WCAG et Convertisseur de couleur.
Texte en dégradé CSS
Exportez le dégradé et appliquez-le avec background-clip: text et une couleur transparente (-webkit-background-clip: text pour Safari).
Bordure en dégradé CSS
Appliquez le dégradé sur un conteneur avec padding et fond intérieur uni, ou border-image avec le même dégradé.
Animer des dégradés CSS
Exportez le CSS statique ici, puis animez background-position ou des propriétés personnalisées dans votre feuille de style.
CSS gradient border
Common patterns: (1) a padded wrapper with the exported gradient background and an inner element with a solid fill, or (2) `border-image` using the same gradient. Prefer the wrapper approach when you need rounded corners and consistent cross-browser results.
Animating CSS gradients
This generator exports static gradient CSS. Animate in your stylesheet by shifting `background-position` on a larger gradient, or by transitioning CSS custom properties that feed into `linear-gradient()` / `conic-gradient()`.
Foire aux questions
Réponses aux problèmes courants et questions de confidentialité.
Documentation officielle et références
Spécifications et documentation de plateforme pour cet utilitaire.