Aller au contenu
Toolars
Explorer
Signaler un bug

Design · utilitaire Local

Générateur de dégradés CSS

CSS Gradient Generator

Composez un dégradé linéaire ou radial avec angle, couleurs et arrêts explicites, et copiez la déclaration background exacte, prête pour une feuille de style.

Parcours de la tâche / de l'entrée au résultat

Choisissez le type de dégradé

S'exécute en local · Rien n'est téléversé

Fonctionnement de Générateur de dégradés CSS, confidentialité et outils associés

Parcours de la tâche / de l'entrée au résultat

Comment composer un dégradé CSS

  1. 01

    Choisissez le type de dégradé

    Ouvrez Type de dégradé et choisissez Linéaire pour un fondu droit ou Radial pour un fondu circulaire. Le badge d'aperçu affiche l'angle actuel pendant que vous travaillez.

  2. 02

    Définissez la direction ou le foyer

    Direction / foyer va de 0 à 360. Pour un dégradé linéaire, c'est l'angle en degrés ; pour un dégradé radial, cela place le foyer sur un anneau autour du centre. Le badge suit la valeur en direct, ce qui rend les petites corrections faciles à juger.

  3. 03

    Choisissez couleurs et arrêts

    Définissez la Couleur de départ et la Couleur d'arrivée, puis positionnez l'Arrêt de départ (0–99 %) et l'Arrêt d'arrivée (1–100 %). Le départ doit précéder l'arrivée, sinon l'état bascule sur VÉRIFIER LES VALEURS.

  4. 04

    Contrôlez la zone de fondu

    La distance entre les deux arrêts est la zone de transition : des arrêts espacés de 1 % produisent un bord quasi franc pour des rayures bicolores, tandis que des arrêts à 0 % et 100 % — les valeurs par défaut — donnent le fondu le plus doux sur toute la largeur. Regardez l'aperçu plutôt que les nombres.

  5. 05

    Copiez la déclaration

    Cliquez sur Copier le CSS ou Télécharger le .css pour enregistrer toolars-gradient.css. La règle .gradient est une seule déclaration background — linear-gradient(…deg, …) ou radial-gradient(circle at …, …) — correspondant exactement à vos arrêts.

  6. 06

    Appliquez-la et étendez-la

    La déclaration unique se compose proprement avec vos propres ajouts de background-size ou background-repeat. Besoin d'une troisième couleur ? Copiez la règle et insérez un arrêt intermédiaire à la main — les deux arrêts que vous avez réglés ancrent les deux extrémités du fondu. Tenir en une ligne, elle se colle aussi proprement dans une propriété personnalisée si votre design system conserve ses jetons ainsi.

Fiche de l'outil

Traitement
Dans votre navigateur
L'entrée quitte cet appareil
Jamais
Conservation
Rien n'est stocké
Prix
Gratuit

Vos données restent dans le navigateur.

Générateur de dégradés CSS utilise son chemin d'exécution local vérifié et ne crée aucun historique caché des entrées ou sorties.

Exécution locale

S'exécute dans l'onglet actuel du navigateur.

Aucun traitement caché

Les données actives de l'outil ne deviennent jamais un enregistrement de document Toolars.

Aucun compte requis

Utilisez le workflow principal sans créer de profil. Les favoris se synchronisent avec votre compte après connexion.

Réinitialisation immédiate

Effacez l'onglet et les données de travail actives disparaissent.

Ce que Générateur de dégradés CSS fait vraiment

Une bande de bannière qui fond du bleu de marque vers le turquoise, une douce lueur radiale derrière une photo de produit, une rayure bicolore à bord franc sur un tableau de tarifs — les dégradés portent plus d'interfaces que n'importe quel asset image. Le mode radial justifie son existence pour les lueurs et les vignettages qu'un fondu linéaire ne peut pas imiter. En composer un visuellement, avec des arrêts explicites au lieu d'à-peu-près, prend quelques secondes, et comme le générateur tourne dans cet onglet, les essais de palette restent privés jusqu'à ce que le design soit livré. La déclaration copiée n'a besoin d'aucun nettoyage avant d'entrer dans une feuille de style.

Questions fréquentes

Pourquoi l'aperçu affiche-t-il VÉRIFIER LES VALEURS ?
Une seule règle s'applique : l'arrêt de départ doit se situer avant l'arrêt d'arrivée. Des arrêts égaux ou inversés rendent le dégradé ambigu, donc le message nomme la règle et la copie comme le téléchargement attendent qu'elle passe. Garder ne serait-ce que 1 % entre les arrêts suffit.
Que fait Direction / foyer en mode radial ?
Pour un dégradé radial, l'angle ne fait rien pivoter — il positionne le foyer du cercle sur un anneau à 25 % du centre, donc 0° pousse le foyer à droite et 180° le pousse à gauche. Les coordonnées circle at X% Y% exportées reflètent cela exactement.
Quel angle donne la direction que je veux ?
Les angles linéaires suivent la convention CSS : 0deg fond vers le haut, 90deg pointe vers la droite, 180deg vers le bas et 270deg vers la gauche. La valeur par défaut de 135deg va du haut à gauche vers le bas à droite, une diagonale qui flatte la plupart des bandes de bannière.
Comment faire une rayure à bord franc ?
La validation exige que l'arrêt de départ précède l'arrêt d'arrivée, donc placez-les à 1 % d'écart — 49 % et 50 % pour une jointure centrée. La zone de transition se réduit à un trait de cheveu, qui se lit comme une séparation bicolore nette sur n'importe quel élément.
Puis-je construire un dégradé à trois couleurs ?
Le générateur fonctionne volontairement avec deux arrêts explicites — c'est ce que couvrent les contrôles et la validation. Après avoir copié la déclaration, ajouter un arrêt intermédiaire à la main est une modification d'une ligne.
Mes couleurs sont-elles téléversées quelque part ?
Non. Tout est calculé dans l'onglet actuel du navigateur sans compte, et aucune valeur n'entre dans le stockage, les journaux ou les analytics. Cliquez sur Réinitialiser pour revenir au fondu linéaire par défaut.

Continuer dans Design

Des tâches associées, pas une impasse.

Passez à un autre espace de travail ciblé sans revenir à l'index complet.

Générateur d'animations de chargement CSS

CSS Loader Generator

Réglez un anneau orbital ou trois points rebondissants — cadre, trait, vitesse et couleurs — et copiez le CSS animé avec bloc prefers-reduced-motion inclus.

Créer

Générateur de cases à cocher CSS

CSS Checkbox Generator

Stylez une case à cocher native : taille, bordure et couleurs d'état réglables, avec états :focus-visible et :disabled dans le CSS exporté, sans JavaScript.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

Concevez un interrupteur en pur CSS — piste, curseur et course calculés — avec focus clavier et mouvement réduit gérés dans le code copié, sans JavaScript.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

Modifiez les sommets par glissement, au clavier ou par coordonnées. Quatre formes de départ, copie locale de clip-path ou du CSS complet.

Créer