Aller au contenu
Toolars
Explorer

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

CSS Gradient Generator

Dégradés linéaires ou radiaux avec 2–16 étapes ; ajouter, supprimer, inverser ou choisir les couleurs au hasard.

Traitement local

Détails du traitement

Les données de l’outil sont traitées sur votre appareil.

Des ressources peuvent être téléchargées pour cet outil. Les services de compte sont distincts.

Informations sur la confidentialité
Signaler un bug

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–16 Points de couleur · Linéaire / Radial · Ajouter / Supprimer / Inverser / Aléatoire

  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

    Ajoutez 2 à 16 points de couleur. Leurs positions vont de 0% à 100% sans diminuer ; des positions égales créent une coupure nette. Modifiez, supprimez, inversez ou mélangez les points puis vérifiez l’aperçu.

  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

    Exporter le résultat actuel. Le HTML inclut le CSS actuel et un exemple fonctionnel. Les contrôles natifs acceptent le clavier.

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 ?
0 ≤ stop[0] ≤ … ≤ stop[N] ≤ 100. Vérifiez source, commandes et validation avant l’export. Un résultat invalide ne peut pas être exporté.
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 ?
Points de couleur: position[i] = position[i+1]. Couleur.
Puis-je construire un dégradé à trois couleurs ?
Points de couleur: 2–16. Ajouter / Supprimer / Inverser / Aléatoire.
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.

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

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

Générateur de cases à cocher CSS

CSS Checkbox Generator

24 modèles de cases : huit marques × trois transitions ; tester l’aperçu natif au clic ou avec Espace.

Créer

Générateur d'interrupteurs CSS

CSS Switch Generator

18 modèles d’interrupteurs : six curseurs × trois transitions ; tester au clic ou au clavier.

Créer

Générateur de clip-path CSS

CSS Clip Path Generator

24 formes de découpe, paramètres et points de polygone modifiables ; exporter CSS ou une déclaration.

Créer