Générateur de dégradés CSS
Créez des dégradés CSS linéaires, radiaux et coniques avec mélange OKLCH ou OKLab et repli sRGB, puis copiez CSS, Tailwind ou SVG, ou téléchargez un PNG.
Arrêts de couleur
Cliquez sur la barre pour ajouter un arrêt, faites glisser un arrêt pour le déplacer. Lorsqu'un arrêt est sélectionné, les flèches du clavier le déplacent et la touche Suppr le retire.
Mélanger les couleurs en
Les mêmes arrêts, mélangés de trois façons. Le sRGB classique peut virer au gris ou devenir terne entre des couleurs éloignées ; OKLab garde une luminosité homogène et OKLCH préserve l'intensité de la couleur. Les navigateurs qui ne connaissent ni OKLab ni OKLCH reçoivent un repli sRGB d'apparence identique.
Texte par-dessus
- Texte blanc
- 2,1:1
- Trop faible
- Texte noir
- 4,2:1
- AA grand texte uniquement
Le contraste le plus faible sur l'ensemble du dégradé. WCAG AA exige 4,5:1 pour le texte courant et 3:1 pour le grand texte.
Code
background: linear-gradient(90deg, #0077a3 0%, #1178a2 1.56%, #1b79a1 3.13%, #2a7b9f 6.25%, #367d9c 9.38%, #3f7f9a 12.5%, #608591 25%, #959179 50%, #ad956b 62.5%, #c59959 75%, #dd9c41 87.5%, #e99d2f 93.75%, #ef9d22 96.88%, #f29e19 98.44%, #f59e0b 100%);
background: linear-gradient(in oklab 90deg, #0077a3 0%, #f59e0b 100%);Composez un dégradé CSS à l'œil et copiez un code qui fonctionne partout. Choisissez linéaire, radial ou conique, faites glisser les arrêts de couleur et décidez comment les couleurs se mélangent : les navigateurs récents savent mélanger en OKLab ou OKLCH, ce qui évite la zone grise et terne des dégradés sRGB classiques, et le code inclut un repli sRGB équivalent pour les plus anciens. Vous voyez aussi si un texte blanc ou noir reste lisible par-dessus, et pouvez exporter une classe Tailwind, un SVG ou un PNG de n'importe quelle taille.