Générez un dégradé CSS linéaire ou radial
Choisissez linéaire ou radial, indiquez une direction ou une forme et listez vos arrêts de couleur pour obtenir un dégradé CSS à coller directement : 135deg avec trois arrêts à 0 %, 45 % et 100 % donne une valeur linear-gradient(). Gratuit dans votre navigateur.
- Gratuit
- Fonctionne dans votre navigateur
- Sans inscription
- Vos données restent sur votre appareil
Lancer gratuitement
Créez un dégradé CSS réutilisable sans assembler vous-même la ponctuation ni hésiter sur la position de chaque arrêt. Choisissez un dégradé linéaire ou radial, indiquez sa direction ou sa forme, puis ajoutez au moins deux arrêts de couleur ordonnés. Chaque arrêt accepte une couleur CSS et une position facultative. Vous obtenez une valeur déterministe prête pour une déclaration background-image, un jeton de conception, une feuille de style ou du code applicatif. Les types, descripteurs, positions et listes incomplètes non valides sont rejetés avec des erreurs de saisie explicites.
Choisissez la famille et la géométrie du dégradé
Commencez par le comportement visuel recherché. Un dégradé linéaire suit un axe : son descripteur doit donc être un angle CSS comme 135deg ou une direction par mots-clés comme to right, to bottom ou to top left. Un dégradé radial se déploie depuis un point.
Son descripteur peut préciser circle ou ellipse, ajouter éventuellement une taille comme closest-side ou farthest-corner, puis définir une origine après at, par exemple circle at center ou ellipse farthest-corner at 25% 40%. Séparer la géométrie des couleurs facilite la vérification et la réutilisation de la requête. Le générateur contrôle le descripteur selon la famille choisie au lieu d’assembler aveuglément des fragments arbitraires.
Il détecte ainsi une forme radiale fournie pour un dégradé linéaire avant que la valeur n’atteigne une feuille de style. Il empêche également de dissimuler dans la géométrie des virgules ou des caractères capables de rompre une déclaration. Choisissez linear pour une transition orientée et radial pour un effet qui rayonne depuis un point focal.
Composez une liste ordonnée d’arrêts de couleur
Ajoutez les arrêts dans l’ordre exact où ils doivent apparaître en CSS. Chaque arrêt exige une couleur et le dégradé complet en demande au moins deux, car une transition ne peut pas exister avec une seule couleur. Vous pouvez employer les formats CSS courants : noms de couleurs, valeurs hexadécimales, rgb(), hsl() ou notation fonctionnelle moderne séparée par des espaces.
La position d’un arrêt reste facultative. Si vous l’omettez, le navigateur répartit les arrêts non précisés selon les règles CSS des dégradés. Si vous la renseignez, elle doit contenir une ou deux longueurs ou valeurs en pourcentage, comme 0%, 12px ou 30% 45%.
Deux positions créent une bande de couleur franche entre les deux limites. Le générateur conserve l’ordre fourni ; il ne trie pas les positions et ne réinterprète pas la palette, car des arrêts descendants ou superposés peuvent produire des ruptures utiles. Il vérifie l’équilibre des parenthèses et rejette les caractères dangereux pour une déclaration.
Cette validation garantit un résultat prévisible tout en respectant vos choix graphiques.
Exploitez la valeur dans CSS et vos automatisations
La réponse contient un champ gradient dont la valeur commence par linear-gradient() ou radial-gradient(). Affectez-la à background-image, ou au raccourci background si aucune autre couche d’arrière-plan ne doit être conservée. Vous pouvez aussi la stocker dans une propriété personnalisée comme --hero-gradient et réutiliser ce jeton dans plusieurs composants.
Puisque la capacité effectue uniquement une validation déterministe et un assemblage de chaînes, une même entrée produit toujours les mêmes espaces et la même sortie. Cette stabilité convient à la génération de code, aux tests d’instantanés, aux constructeurs de thèmes et aux systèmes éditoriaux qui comparent les valeurs octet par octet. Aucun appel réseau, choix aléatoire, modèle d’inférence ou accès à l’horloge ne modifie le résultat.
Lors de l’intégration, gardez à l’esprit que l’outil génère la valeur d’image du dégradé et non une règle CSS complète : votre application choisit le sélecteur, la propriété, les solutions de repli, les dimensions et la couleur de fond unie éventuelle.
Cas d’usage
Créez des jetons de conception
Transformez des réglages structurés de palette et de géométrie en dégradés stables pour un thème ou une bibliothèque de composants.
Alimentez un éditeur visuel de styles
Convertissez les contrôles de type, direction, forme, couleurs et positions en CSS prêt pour un aperçu immédiat.
Générez des valeurs pendant la compilation
Produisez des dégradés cohérents depuis des fichiers de configuration sans entretenir votre propre logique d’assemblage et de validation.
Questions fréquentes
Un arrêt peut-il omettre sa position ?
Oui. Le navigateur place automatiquement les arrêts non précisés selon les règles CSS des dégradés.
Quelles directions linéaires sont acceptées ?
Utilisez un angle en deg, grad, rad ou turn, ou une direction comme to right, to bottom ou to top left.
Puis-je déplacer le centre d’un dégradé radial ?
Oui. Ajoutez une position avec at au descripteur radial, comme circle at center ou ellipse at 20% 40%.
Comment créer une bande de couleur nette plutôt qu'une transition douce ?
Donnez deux positions à un arrêt, par exemple 30% 45% : la même couleur occupe tout ce segment et forme une bande franche. Des positions qui se chevauchent ou décroissent créent aussi des coupures nettes, et l'ordre saisi est conservé.
Où utiliser le dégradé généré ?
Affectez-le à background-image, ou au raccourci background lorsqu'aucun autre calque d'arrière-plan n'est à conserver. Il peut aussi servir de valeur de design réutilisable ou figurer directement dans une feuille de style.
Outils associés
Pour les développeurs — accès API
Tout sur cette page est disponible par programmation. Cette section s'adresse aux équipes qui veulent l'intégrer à leurs systèmes ; les autres peuvent simplement utiliser l'outil ci-dessus.
Endpoint
Authentification par jeton Bearer : un seul POST met la tâche en file d’attente, et le résultat vous parvient par webhook ou lien signé.
Appeler depuis votre stack
curl -X POST https://api.kit.forhosting.com/web/css-gradient-generate \
-H "Authorization: Bearer $KIT_KEY" \
-H "Content-Type: application/json" \
-d '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}'const res = await fetch("https://api.kit.forhosting.com/web/css-gradient-generate", {
method: "POST",
headers: {
"Authorization": `Bearer ${process.env.KIT_KEY}`,
"Content-Type": "application/json"
},
body: JSON.stringify({
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
})
});
const { task_id } = await res.json();import os, requests
res = requests.post(
"https://api.kit.forhosting.com/web/css-gradient-generate",
headers={"Authorization": f"Bearer {os.environ['KIT_KEY']}"},
json={
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
},
)
task_id = res.json()["task_id"]<?php
$res = file_get_contents("https://api.kit.forhosting.com/web/css-gradient-generate", false, stream_context_create([
"http" => [
"method" => "POST",
"header" => "Authorization: Bearer " . getenv("KIT_KEY") . "\r\nContent-Type: application/json",
"content" => '{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}',
],
]));
$task = json_decode($res, true);body := bytes.NewBufferString(`{"gradient_type":"linear","direction_or_shape":"to right","color_stops":[{"color":"#2563eb","position":"0%"},{"color":"#7c3aed","position":"100%"}]}`)
req, _ := http.NewRequest("POST", "https://api.kit.forhosting.com/web/css-gradient-generate", body)
req.Header.Set("Authorization", "Bearer "+os.Getenv("KIT_KEY"))
req.Header.Set("Content-Type", "application/json")
res, _ := http.DefaultClient.Do(req)Exemple de requête
{
"gradient_type": "linear",
"direction_or_shape": "to right",
"color_stops": [
{
"color": "#2563eb",
"position": "0%"
},
{
"color": "#7c3aed",
"position": "100%"
}
]
}Exemple de réponse
{
"task_id": "tsk_a1b2c3d4e5f6a1b2c3d4e5f6",
"type": "web.css_gradient_generate",
"status": "queued",
"_links": {
"result": "/tasks/tsk_…/result"
}
}L’API est asynchrone : chaque appel renvoie un task_id immédiatement, puis vous interrogez l’état à raison d’une requête par seconde.
Tarifs
Le prix est publié, sans tokens ni crédits. Une tâche qui échoue n’est pas facturée.
Limites
timeout_sec | 30 |
max_crawl_pages | 25 |
Erreurs
| HTTP | Code | Signification |
|---|---|---|
401 | unauthorized | Clé API absente ou invalide : vérifiez l’en-tête Authorization. |
402 | insufficient_balance | Solde insuffisant : rechargez votre compte pour lancer cette tâche. |
404 | unknown_type | Type de tâche inconnu : vérifiez le champ type de votre requête. |
429 | rate_limited | Trop de requêtes : ralentissez la cadence, puis réessayez. |
Notes techniques
Exploitez la valeur dans CSS et vos automatisations
L’exécuteur du navigateur facilite la conception interactive, tandis que chaque requête automatisée par API coûte $0.002.
Questions techniques
Combien d’arrêts de couleur faut-il fournir ?
Au moins deux arrêts sont obligatoires. Une requête qui en contient moins échoue avec une erreur invalid_input.
Quel est le tarif ?
Le tarif de l’API est de $0.002 par requête. L’exécuteur disponible sur cette page est gratuit.