Générateur de dégradé CSS
Conçu pour la confidentialité — fonctionne entièrement dans votre navigateur
Créez des dégradés CSS linéaires et radiaux visuellement, dans votre navigateur. Toova vous permet de placer des points de couleur, d'ajuster les angles, de changer de type et d'exporter du CSS prêt à coller — sans rien charger sur un serveur.
Dégradés linéaires, radiaux et coniques
Les dégradés linéaires se déplacent le long d'un axe défini par un angle ou un mot-clé de direction. Les dégradés radiaux s'étendent depuis un point central. Les dégradés coniques balayent autour d'un angle — parfaits pour des arrière-plans en forme de camembert ou des effets de roue chromatique. Toova expose les trois types avec des contrôles visuels, afin que vous puissiez créer le dégradé souhaité sans mémoriser chaque variante de la syntaxe CSS.
Points de couleur et easing
Faites glisser les points de couleur le long de la barre de dégradé pour contrôler où chaque couleur commence et se termine. Ajoutez autant de points que nécessaire — Toova ne les limite pas. Utilisez les préréglages d'easing pour introduire une interpolation non linéaire, ce qui évite le milieu grisâtre caractéristique des dégradés à deux couleurs simples. Le CSS généré utilise des propriétés standard prises en charge par tous les navigateurs modernes.
Génération dans le navigateur uniquement
Chaque dégradé est généré localement dans votre navigateur. Les couleurs que vous choisissez, les points que vous placez, le CSS de sortie — rien de tout cela ne quitte la page. C'est peut-être excessif pour des dégradés, mais cela rend l'outil rapide et fiable, et la page fonctionne hors ligne après le premier chargement. L'onglet Réseau restera vide pendant l'utilisation.
Questions fréquentes
- Quand utiliser un dégradé conique ?
- Les dégradés coniques sont parfaits pour les effets de camembert, les roues chromatiques et les arrière-plans tournants abstraits. Ils balayent autour d'un point central, ce que ni les dégradés linéaires ni radiaux ne peuvent faire. La prise en charge par les navigateurs est maintenant solide dans tous les moteurs modernes.
- Comment éviter le milieu grisâtre dans les dégradés à deux couleurs ?
- Ajoutez un point intermédiaire avec une couleur perceptuellement équilibrée, ou choisissez des couleurs avec une luminosité similaire. Mélanger des couleurs complémentaires via leur point médian RGB produit du gris — choisir le point médian manuellement en OKLCH l'évite.
- Puis-je exporter vers d'autres formats ?
- La sortie est du CSS standard, qui fonctionne directement dans n'importe quel contexte web. Pour les outils de design, copiez les points de couleur individuels et reproduisez le dégradé dans Figma ou Sketch.
- La transparence est-elle prise en charge ?
- Oui. N'importe quel point de couleur peut avoir un canal alpha. Utile pour faire fondre les bords dans l'arrière-plan ou superposer des dégradés avec des points semi-transparents.
- Mes données sont-elles envoyées quelque part ?
- Non. La génération s'exécute entièrement dans votre navigateur.