Design linear, radial, and conic gradients with live preview and copy-ready CSS.
background: -webkit- linear-gradient(135deg, #667eea 0%, #764ba2 100%); background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
Generated CSS follows W3C CSS Images Module Level 3 specifications. Browser compatibility may vary. WebKit prefix is included for Safari support. Test across browsers.
A CSS gradient is not an image — it is a function the browser evaluates for every pixel it paints. A linear-gradient first draws an invisible gradient line through the element at your chosen angle, places your color stops (a color + a 0–100% position) along it, then interpolates each pixel's color between the two nearest stops. radial-gradient runs that same interpolation outward from a center point (circle or ellipse), while conic-gradient sweeps it around the center in a full rotation. Two stops are the minimum; more stops let you build banded or multi-color effects, and the browser keeps each adjacent pair of stops fully opaque and smoothly blended.
Left: a 135° linear gradient whose line runs from the top-left stop (#667eea at 0%) to the bottom-right stop (#764ba2 at 100%); each intermediate pixel is a weighted mix of the two. Right: the same stop concept wrapped radially (circle/ellipse) and conically (around the center).
Leo, a front-end dev, is handed a design mock with a diagonal purple-to-blue hero background but only a screenshot — no code. He opens this generator to recreate the exact feel and ship it as copy-ready CSS.
Build CSS gradients visually with live preview. Everything runs locally; nothing is uploaded.
FreeToolHub CSS Gradient Generator is a free browser-based tool — build CSS gradients visually with live preview. No signup, no upload; everything runs locally in your browser.
Construisez des dégradés CSS visuellement avec un aperçu en direct. Types linéaires, radiaux et coniques. Faites glisser les points de couleur, ajustez les angles. Code standard + WebKit.
Ce générateur crée des dégradés CSS visuellement : choisissez le type linéaire, radial ou conique, faites glisser les points de couleur le long de la barre, ajustez l'angle et la position, et observez l'aperçu se mettre à jour en direct. L'outil émet un code prêt pour la production incluant la propriété standard et la solution de repli -webkit- pour les anciens Safari, avec une syntaxe pour les variantes répétées lorsque les motifs sont l'objectif. Les dégradés multi-stops avec des points médians, des points de couleur transparents et des directions linéaires précises en angle se configurent tous par manipulation directe — le chemin le plus rapide du fond imaginé au CSS expédié.
Les développeurs frontend prototypent les arrière-plans principaux, les boutons et les séparateurs sans écrire à la main la syntaxe des dégradés et sans retoucher les nombres à l'aveugle. Les designers fournissent aux développeurs des spécifications exactes — points, angles, valeurs hexadécimales — au lieu de langage d'approximation comme "rends-le plus chaud". Les créateurs de pages d'atterrissage suivent les palettes de marque pour créer des systèmes de dégradés pour les cartes et les appels à l'action. Quiconque maintient d'anciennes bases de code apprécie la sortie générée avec le préfixe -webkit- lorsqu'elle est encore nécessaire. L'aperçu en direct supprime complètement la boucle modifier-enregistrer-rafraîchir.
(1) Choisissez le type de dégradé : linéaire pour les mélanges directionnels, radial pour la lumière émanant d'un point, conique pour les effets de balayage et les visuels en camembert. (2) Ajoutez des points de couleur en cliquant sur la barre ; faites glisser pour positionner, cliquez pour modifier la couleur et l'alpha, faites glisser les poignées de milieu pour biaiser le mélange. (3) Pour les dégradés linéaires, réglez l'angle en degrés ; pour les dégradés radiaux et coniques, réglez la position centrale. (4) Copiez le CSS généré — standard et avec préfixe WebKit — directement dans votre feuille de style ; un commutateur de répétition convertit n'importe quelle configuration en son équivalent répétitif.
Les trois types répondent à trois questions visuelles. Les dégradés linéaires mélangent le long d'une ligne et s'occupent des tâches de base : arrière-plans de héros et de sections, boutons, soulignements de texte, remplissages de progression et séparateurs — des mélanges subtils à deux stops, du foncé au plus foncé, à 135 ou 180 degrés, lisent comme de la lumière tombant sur une surface. Les dégradés radiaux mélangent à partir d'un point et simulent des sources lumineuses : effets de projecteur, vignettes, douces lumières derrière les icônes et le classique halo subtil en arrière-plan de page qui ancre l'attention au centre. Les dégradés coniques balayent autour d'un cercle et construisent une structure rotationnelle : graphiques circulaires, roues de couleur, indicateurs de chargement, anneaux de progression de style radar et effets de badge angulaires — tout ce où la position signifie une direction plutôt qu'une distance. Deux règles de métier portent la majeure partie de la qualité : gardez les stops proches en luminosité pour les arrière-plans (un écart de luminosité de 5–10 % suffit) car les grands sauts créent un banding visible, et préférez les dégradés aux superpositions semi-transparentes pour assombrir les héros photographiques — une superposition aplatit l'image, un dégradé foncé préserve la profondeur.
Un dégradé n'est aussi bon que sa liste de stops, et trois habitudes séparent les mélanges aboutis des mélanges boueux. Premièrement, ordonnez les stops par luminosité ainsi que par position — une course du foncé au clair se sent directionnelle et intentionnelle, tandis qu'une alternance de luminosité se lit comme un effet de banding. Deuxièmement, deux stops sont généralement suffisants : chaque stop supplémentaire réduit de moitié votre contrôle sur le mélange, alors n'ajoutez des points médians que pour corriger une zone plate ou dure spécifique. Troisièmement, maintenez le déplacement de teinte sous environ 90 degrés entre voisins, sauf si vous voulez délibérément un balayage arc-en-ciel — le pourpre au bleu reste riche tandis que le pourpre au jaune passe par un gris que personne n'a demandé. Chargez un préréglage, échangez ses deux valeurs hexadécimales contre vos couleurs de marque, et ajustez les positions avant d'ajouter quoi que ce soit. Enregistrez le résultat dans votre navigateur et copiez le CSS — la sortie est du CSS simple sans dépendances.
Les dégradés linéaires et radiaux fonctionnent dans tous les navigateurs sortis cette décennie. Les dégradés coniques sont pris en charge dans tous les navigateurs evergreen (Chrome, Edge, Firefox, Safari) depuis 2020-2021 — sûrs pour un usage général, avec une couleur de repli solide recommandée pour les clients de messagerie et les webviews hérités.
Les dégradés linéaires mélangent le long d'un axe — parfaits pour les bannières, les boutons et les superpositions. Les dégradés coniques mélangent autour d'un cercle — parfaits pour les graphiques circulaires, les anneaux de chargeur et les balayages de couleur angulaires. Si le design se lit comme "de là à là", utilisez linéaire ; s'il se lit comme "autour du cadran", utilisez conique.
Les dégradés sont peints une fois et mis en cache comme n'importe quelle image d'arrière-plan, donc les dégradés statiques sont essentiellement gratuits. Animer les positions de dégradé force de nouveaux rendus — si vous avez besoin de mouvement, animez une transformation sur une couche de dégradé surdimensionnée au lieu du dégradé lui-même pour rester sur le GPU.
Mélangez des teintes qui s'accordent avec leurs voisins : les stops adjacents fonctionnent mieux à environ 90 degrés de teinte, ou à une luminosité similaire dans les teintes voisines. Placez les stops au milieu visuel plutôt qu'au milieu arithmétique pour garder le mélange uniforme — les palettes prédéfinies sont des points de départ pré-équilibrés.
Il prend en charge linear-gradient (avec contrôle d'angle de 0° à 360°), radial-gradient (cercle/ellipse avec contrôle de position) et conic-gradient (avec angle de départ). Ajoutez un nombre illimité de stops de couleur avec un positionnement en pourcentage précis. L'aperçu en direct se met à jour lorsque vous faites glisser, et la sortie est un CSS prêt pour la production avec préfixes de fournisseur si nécessaire.
Oui. Copiez la valeur de la propriété CSS, une définition de classe complète, ou une valeur arbitraire de Tailwind CSS. Il génère également le balisage SVG équivalent pour une utilisation dans les outils de design. Des préréglages populaires (aurore, coucher de soleil, dégradé multi-style en maillage) sont inclus comme points de départ, chacun avec 3-5 stops de couleur préconfigurés.
It supports linear-gradient (with angle control from 0° to 360°), radial-gradient (circle/ellipse with position control), and conic-gradient (with starting angle). Add unlimited color stops with precise percentage positioning. The live preview updates as you drag, and output is production-ready CSS with vendor prefixes if needed.
Yes. Copy the CSS property value, a full class definition, or a Tailwind CSS arbitrary value. It also generates the equivalent SVG markup for use in design tools. Popular presets (aurora, sunset, mesh-style multi-gradient) are included as starting points, each with 3-5 color stops pre-configured.
What do you call a really smart cookie?
No signups, no data sold. Every tool is free to use — the free tier allows 5 downloads or saves per day, and the optional Pro plan ($7/mo, $59/yr) adds unlimited downloads, batch processing, white-label exports and an ad-free experience.
☕Support me on Ko-fi— support the free tier100% of proceeds go towards hosting & building more free tools.