Générateur de bordure en dégradé CSS, gratuit

Comment ça marche

1. Choisissez les couleurs : sélectionnez deux couleurs ou plus pour le dégradé via les pipettes.
2. Réglez la largeur et le rayon : ajustez l'épaisseur et l'arrondi des coins selon votre design.
3. Copiez le CSS : le code généré via border-image ou la technique de pseudo-élément est prêt à coller dans votre feuille de style.

Pourquoi utiliser ce générateur de bordure en dégradé ?

Les bordures en dégradé CSS sont un détail de design frappant utilisé dans les frameworks UI modernes, les cartes, les états hover de boutons et les sections mises en avant. Or, la propriété CSS border n'accepte que des couleurs unies - créer une bordure en dégradé nécessite une astuce via border-image ou un pseudo-élément avec des manipulations de background-clip. Ce générateur couvre les deux techniques et produit un CSS propre, prêt à copier, pour vous concentrer sur le design plutôt que sur la syntaxe.

Fonctionnalités

• Deux méthodes : choisissez entre border-image (simple) et la technique du pseudo-élément avec background-clip (gère le border-radius).
• Prise en charge du border-radius : la méthode du pseudo-élément permet des coins arrondis que border-image ne sait pas produire.
• Dégradés multi-stops : ajoutez autant d'étapes de couleurs que vous voulez pour des effets arc-en-ciel ou aux couleurs de votre marque.
• Aperçu en direct : voyez exactement le rendu de la bordure avant de copier le code.
• Contrôle de l'angle : pivotez la direction du dégradé avec un sélecteur d'angle visuel.

Questions fréquentes

Pourquoi ne puis-je pas utiliser border-image avec border-radius ?

border-image remplace entièrement le rendu de la bordure et ignore border-radius - les coins restent carrés. Pour combiner bordure en dégradé et coins arrondis, utilisez la technique du pseudo-élément : appliquez le dégradé en fond d'un ::before et background-clip: padding-box sur l'élément lui-même.

Puis-je animer des bordures en dégradé ?

Oui. Les bordures en dégradé créées avec la méthode background + pseudo-élément peuvent être animées en transitionnant background-position sur le dégradé. Appliquez background-size: 300% 300% et animez background-position pour un effet fluide.

Cela fonctionne-t-il sur les boutons et les champs de saisie ?

Oui, le CSS généré fonctionne sur n'importe quel élément HTML. Pour les boutons, préférez le pseudo-élément pour conserver le border-radius. Pour les champs de saisie, appliquez la technique border-image ou enveloppez le champ dans un conteneur en dégradé.

Ce que les bordures en dégradé CSS résolvent vraiment

La propriété CSS border n’accepte qu’une seule couleur unie, pas un dégradé. C’est une limitation de l’ère 1996 qui a survécu jusqu’au CSS moderne. Pendant la majeure partie de l’histoire du web, les designers qui voulaient un contour en dégradé autour d’une carte ou d’un bouton devaient choisir entre utiliser une image d’arrière-plan (raster, ne se met pas à l’échelle), envelopper l’élément dans un conteneur coloré (fonctionne mais casse subtilement la mise en page) ou accepter des bordures unies. Les bordures en dégradé CSS sont des contournements qui simulent l’apparence de border: 3px solid linear-gradient(...) à travers d’autres propriétés CSS, puisque cette syntaxe exacte n’existe pas.

Deux techniques dominent. border-image (CSS Backgrounds and Borders Module Level 3, 2012) remplace le rendu de la bordure par un dégradé ou une image. Cela fonctionne, mais border-image ignore complètement border-radius : les coins restent carrés. La technique pseudo-élément + background-clip utilise un élément wrapper avec un fond en dégradé et une superposition interne qui masque tout sauf la zone de bordure. Cela prend en charge les coins arrondis mais nécessite deux couches de CSS et une gestion soigneuse de la padding par rapport à content-box. Une troisième approche moderne utilise mask-composite (navigateurs 2020+) pour une solution mono-élément plus propre.

Les bordures en dégradé comptent pour les tendances de design actuelles. Les mises en page basées sur cartes (Stripe, Linear, Vercel, Cursor) utilisent des bordures en dégradé subtiles à deux couleurs pour ajouter de la profondeur sans lourdeur. Les surbrillances de fonctionnalités premium dessinent souvent une bordure en dégradé colorée pour indiquer le statut « Pro ». Les esthétiques cyberpunk et synthwave utilisent des bordures en dégradé néon pour évoquer des ambiances rétro-futur. Les lancements de produits IA en 2023-2024 ont standardisé les bordures en dégradé animées multi-couleurs comme signature visuelle (OpenAI, Anthropic, Perplexity). Ce qui nécessitait autrefois des éditeurs d’images se livre maintenant en 5 à 10 lignes de CSS.

Comment cet outil fonctionne en coulisses

L’aperçu est un seul div avec les deux techniques appliquées via CSS inline, commutable selon votre choix de méthode. Pour border-image, l’outil règle border: Npx solid transparent avec border-image: linear-gradient(...) 1 ; la valeur de tranche 1 dit au navigateur d’utiliser le dégradé à la taille complète pour chaque bord de la bordure. Pour la technique du pseudo-élément, l’outil applique un fond en dégradé à l’élément externe et utilise ::before (ou background-clip: padding-box) pour masquer la zone de contenu interne, ne laissant visible que l’anneau de bordure.

Les arrêts de couleur sont stockés comme un tableau JavaScript de paires {color, position}. Quand vous choisissez des couleurs ou déplacez le curseur d’angle, l’outil reconstruit la chaîne linear-gradient() en joignant les arrêts avec des virgules et en préfixant l’angle : linear-gradient(45deg, #ff0080 0%, #7928ca 100%). Cette chaîne est interpolée à la fois dans le CSS d’aperçu et dans la boîte de code. Le curseur d’angle utilise une plage de 0 à 360 degrés avec une rotation visuelle de flèche SVG pour le retour d’orientation.

Rien ne quitte votre navigateur. La génération de chaîne de dégradé, le stockage des couleurs, le rendu de l’aperçu et la copie au presse-papiers se produisent tous en JavaScript sur votre appareil. Aucune requête réseau n’est faite ; aucune analyse ne suit quelles couleurs vous choisissez. L’outil n’a pas de backend du tout au-delà du HTML statique et du JavaScript servis une fois au premier chargement. Rafraîchissez la page et vos couleurs sélectionnées et l’angle sont partis sauf si vous avez d’abord copié le CSS.

Brève histoire des bordures et dégradés CSS

• Bordures CSS 1, 1996.La première spécification CSS (CSS 1, décembre 1996) définit border-style, border-width et border-color, ne supportant que les couleurs unies et les huit styles de bordure (none, dotted, dashed, solid, double, groove, ridge, inset, outset). Aucune prise en charge des dégradés, un choix architectural qui persiste pendant 16 ans.
• CSS linear-gradient est livré, 2008 à 2011.WebKit introduit -webkit-gradient() en 2008, suivi du linear-gradient() standardisé dans CSS Image Values and Replaced Content Module Level 3 (2011). Les dégradés deviennent des citoyens CSS de première classe pour les arrière-plans, mais pas pour les bordures. Les designers veulent immédiatement des bordures en dégradé ; la spec ne s’adapte pas.
• border-image arrive, 2012.CSS Backgrounds and Borders Module Level 3 (CR juin 2012) définit border-image avec un support complet des navigateurs d’ici 2014. Permet aux bordures d’utiliser n’importe quelle image, y compris les dégradés CSS. Le piège : border-image remplace border-radius, donc les bordures en dégradé arrondies restent impossibles avec cette technique seule.
• Le modèle de contournement pseudo-élément émerge, 2013 à 2015.CSS-Tricks et des ressources similaires publient des contournements utilisant des pseudo-éléments ::before avec des fonds en dégradé et des astuces background-clip: padding-box. La « bordure en dégradé arrondie » devient résoluble mais nécessite de comprendre les subtilités du modèle de boîte. D’ici 2015, le motif est répandu dans la documentation des systèmes de design.
• conic-gradient atterrit, 2018 à 2021.CSS conic-gradient() (Chrome 69, septembre 2018 ; Firefox 83, novembre 2020 ; Safari 12.1, mars 2019) permet des dégradés en balayage circulaire, idéaux pour les effets « anneau de chargement » avec des bordures en dégradé. Combinés avec l’animation, les bordures conic-gradient créent les motifs de lueur rotative populaires lors des lancements de produits IA en 2023.
• mask-composite débloque des solutions plus propres, 2020 à 2024.Le support CSS Masking Module Level 1 (2014) et mask-composite dans les navigateurs modernes (2020+) permet des bordures en dégradé à un seul élément sans pseudo-éléments : superposez un fond en dégradé et masquez tout sauf l’anneau extérieur via des opérations composites. D’ici 2024, c’est l’approche de production la plus propre, bien que les contournements pseudo-éléments restent compatibles avec les navigateurs plus anciens.

Flux du monde réel

• Accents subtils des composants de carte.Les cartes de tableau de bord modernes (pensez Stripe, Linear, Vercel) utilisent des bordures en dégradé de 1 à 2 pixels dans des schémas de couleurs à deux ou trois tons pour ajouter de l’intérêt visuel sans lourdeur. Le dégradé est généralement subtil : 10% à 20% d’opacité, faible contraste, principalement en niveaux de gris avec une touche de couleur de marque. C’est suffisant pour différencier les cartes d’un fond plat et signaler l’interactivité.
• Surbrillances de fonctionnalités premium.Les tableaux de prix SaaS utilisent des bordures en dégradé vives (souvent or-vers-violet ou arc-en-ciel) sur le plan « Pro » ou « Recommandé » pour l’élever visuellement. Le motif fonctionne parce qu’il attire l’œil par la couleur et le mouvement (si animé) sans nécessiter d’étiquettes de badge. Linear, Notion, Figma et la plupart des pages de tarification SaaS modernes utilisent ce motif exact.
• Effets néon et de lueur.Les esthétiques cyberpunk, synthwave et UI de jeu combinent les bordures en dégradé avec box-shadow pour un look de tube néon. La bordure fournit la transition de couleur, l’ombre fournit la floraison. Motif courant : border-image: linear-gradient(45deg, #ff0080, #00d4ff) 1 plus box-shadow: 0 0 20px rgba(255,0,128,0.5) sur le même élément.
• Identité visuelle des produits IA.La vague 2023-2024 des outils IA (OpenAI ChatGPT, Anthropic Claude, Perplexity, Cursor) a convergé sur des bordures en dégradé multi-couleurs animées comme signature visuelle pour « l’IA réfléchit » ou les champs de saisie en attente de traitement IA. Habituellement des dégradés coniques rotatifs ou des dégradés linéaires changeants sur une boucle de 4 à 6 secondes. Devient un raccourci pour « intelligent / génératif » dans l’UX moderne.
• Polissage des états de survol et de focus.Les boutons et entrées qui passent d’une bordure unie à l’état de repos à une bordure en dégradé au survol ou au focus se sentent premium et intentionnels. La transition entre les couleurs peut s’animer avec des transitions CSS sur background-position si le dégradé s’étend au-delà de la zone visible (background-size: 200% 100% avec une animation de glissement).
• Expression des couleurs de marque.Les systèmes de marque avec des logos multi-couleurs (Instagram, Slack, Discord) utilisent souvent des bordures en dégradé pour étendre leur identité dans les composants UI. Une carte avec le dégradé de marque comme bordure établit une continuité visuelle avec le logo. Pour les pages marketing SaaS, c’est l’un des moyens les moins coûteux de rendre un composant générique « de marque ».

Pièges courants et ce qu’ils signifient

• border-image ignore border-radius.La confusion la plus courante : utiliser border-image: linear-gradient(...) aux côtés de border-radius produit des coins carrés. border-image prend complètement en charge le rendu de la bordure et la propriété radius n’a aucun effet sur le résultat peint. Pour obtenir des bordures en dégradé arrondies, utilisez la technique du pseudo-élément ou l’approche moderne mask-composite, pas border-image.
• La technique du pseudo-élément nécessite padding-box.Le contournement standard utilise background sur l’élément externe et une superposition interne via ::before. Détail critique : la superposition interne a besoin de background-clip: padding-box pour s’arrêter au bord du padding, laissant la zone de bordure visible. Sauter cette propriété de clip résulte en un dégradé complètement couvert par la superposition, aucune bordure visible.
• Animer les bordures en dégradé coûte cher en GPU.Les bordures en dégradé animées (le motif « shimmer IA ») fonctionnent en transitionnant background-position sur un grand dégradé. Bien que les GPU modernes gèrent bien cela, l’appliquer à de nombreux éléments simultanément (par ex. chaque carte sur une page) fait chuter les fréquences d’images de manière notable sur les appareils bas de gamme. Utilisez les bordures en dégradé animées avec parcimonie : un ou deux éléments « héros » par page, pas à l’échelle du site.
• Conflit de couleur en mode sombre.Une bordure en dégradé conçue pour un fond clair semble souvent fausse sur des fonds sombres. Les dégradés blancs purs deviennent invisibles ; les couleurs vives semblent sursaturées. Pour les designs à double thème, définissez des arrêts de couleur de dégradé séparés pour les modes clair et sombre via les propriétés personnalisées CSS ou les media queries. Réduisez la saturation et ajustez la teinte pour maintenir l’harmonie visuelle avec le thème environnant.
• Les bordures à faible contraste échouent à l’accessibilité.Les bordures en dégradé subtiles qui semblent élégantes peuvent échouer au WCAG 2.1 SC 1.4.11 Non-text Contrast (3:1 minimum) pour les composants UI qui transmettent un état. Si la bordure en dégradé est le seul indicateur visuel des limites d’un bouton ou de la sélectionnabilité d’une carte, assurez un contraste adéquat avec l’arrière-plan. Pour les bordures purement décoratives sur des éléments déjà visibles, le contraste est moins critique mais vaut quand même la peine d’être vérifié.
• Internet Explorer et l’ancien Edge ne supportent rien d’utile.IE 11 (retiré en juin 2022) et l’Edge pré-Chromium (2015 à 2019) manquent de border-image fiable pour les dégradés, mask-composite, et plusieurs techniques de pseudo-éléments. Pour ces navigateurs hérités, repliez-vous gracieusement sur une bordure unie utilisant la couleur médiane du dégradé. Les navigateurs modernes couvrent 99%+ des utilisateurs en 2026, mais les fallbacks hérités restent importants pour les logiciels d’entreprise.

Confidentialité : tout s’exécute dans votre navigateur

Les outils générateurs CSS viennent en deux saveurs : pages HTML simples exécutant du JavaScript côté client (privées, rapides) et éditeurs cloud qui sauvegardent vos projets (collaboratifs mais avec des compromis de confidentialité). Cet outil est du premier type. Vos couleurs sélectionnées, votre angle, votre CSS généré : tout reste dans votre session navigateur. Rafraîchissez la page et l’état est parti sauf si vous avez copié le CSS d’abord. Aucun serveur ne stocke vos choix de dégradé, aucune analyse ne suit quelles combinaisons de couleurs vous avez essayées, et aucun compte n’est nécessaire.

La propriété de confidentialité compte surtout pour le travail de design propriétaire. Un studio prototypant des combinaisons de dégradés pour une refonte de marque confidentielle, un développeur travaillant sur les accents UI d’un produit non annoncé, ou un designer itérant sur une palette de campagne : tout contexte où le choix de couleur ou l’historique d’itération pourrait fuir des informations sur le travail. Avec cet outil, il n’y a rien de capturé parce que rien n’est envoyé. Ouvrez l’onglet Réseau du navigateur et vous verrez zéro requête sortante pendant l’utilisation ; seul le chargement initial de la page récupère le HTML et JavaScript.

Quand un autre outil est le bon choix

• SVG pour les formes de bordure complexes.Pour les bordures en dégradé non rectangulaires (arrondies avec encoches, bords festonnés, formes irrégulières personnalisées), SVG avec linearGradient ou radialGradient appliqué à un attribut stroke fournit un contrôle total. Les bordures en dégradé CSS fonctionnent pour les rectangles et rectangles arrondis ; SVG gère tout le reste. Utilisez les deux ensemble : SVG pour les contours de forme décoratifs, CSS pour les composants UI standards.
• Photoshop pour les images en dégradé statiques.Si la bordure en dégradé est sur une image héros statique ou bannière qui ne changera pas, la concevoir dans Photoshop, Figma ou Sketch et l’exporter en PNG ou WebP peut être plus simple que de maintenir du CSS. L’image se met à l’échelle dans le pipeline d’actifs de la page. Les bordures en dégradé CSS sont pour les éléments dynamiques (cartes, boutons, composants) qui doivent rendre à n’importe quelle taille.
• Bibliothèques de composants pour la cohérence du système de design.Tailwind UI, shadcn/ui, Radix et d’autres bibliothèques de composants livrent des composants de carte et de bouton pré-stylés avec des variantes de bordure en dégradé optionnelles. Pour les projets utilisant déjà ces bibliothèques, appliquer la variante de la bibliothèque est plus rapide que de rouler le CSS à la main. Les bordures en dégradé roulées à la main sont utiles pour les designs ponctuels ou les projets pas encore engagés dans une bibliothèque de composants.
• Canvas ou WebGL pour les effets animés multi-couches.Pour les effets de dégradé fortement animés et multi-couches (systèmes de particules, simulations de fluides, art génératif), Canvas 2D ou WebGL fournit un contrôle par pixel que CSS ne peut pas égaler. Le compromis est la complexité d’implémentation et l’accessibilité (le contenu canvas est invisible aux lecteurs d’écran). Pour les bordures en dégradé décoratives sur des composants UI standards, CSS est le bon choix ; pour les effets visuels, envisagez des approches basées sur canvas.

Autres questions fréquentes

Puis-je utiliser plus de deux couleurs dans une bordure en dégradé ?

Oui. CSS linear-gradient() accepte un nombre illimité d’arrêts de couleur : linear-gradient(45deg, #ff0080 0%, #ffa500 50%, #00d4ff 100%) crée un dégradé à trois couleurs passant par l’orange au milieu. Ajoutez autant d’arrêts que vous voulez, chacun avec une position optionnelle. Pour les dégradés multi-couleurs complexes (effet arc-en-ciel), répartissez les arrêts uniformément : 0%, 16,7%, 33,3%, 50%, 66,7%, 83,3%, 100%.

Comment créer une bordure en dégradé arc-en-ciel ou conique ?

Pour les dégradés coniques (de balayage), utilisez conic-gradient(from 0deg, red, yellow, lime, cyan, blue, magenta, red) comme fond de l’élément externe avec la technique de masquage padding-box pseudo-élément. Pour un effet rotatif (populaire dans les états de chargement de produits IA), animez --angle via CSS Houdini ou utilisez @property --angle avec une animation de rotation de 360 degrés. Le résultat est un balayage de couleur fluide autour de la bordure.

Puis-je utiliser des propriétés personnalisées CSS pour des bordures en dégradé conscientes du thème ?

Oui, et c’est l’approche recommandée pour les systèmes de design. Définissez les couleurs de dégradé comme propriétés personnalisées CSS (--gradient-start, --gradient-end) et utilisez-les dans votre déclaration de dégradé : linear-gradient(var(--angle), var(--gradient-start), var(--gradient-end)). Substituez les variables dans les media queries de mode sombre ou les classes de thème. Un fichier CSS gère à la fois les thèmes clair et sombre via la redéfinition de variables.

Cela fonctionne-t-il dans les anciens navigateurs comme Internet Explorer ?

Internet Explorer 11 (officiellement retiré par Microsoft en juin 2022) avait un support partiel de border-image mais un rendu de dégradé non fiable, et pas de mask-composite. Les navigateurs modernes (Chrome 88+, Firefox 78+, Safari 14+) supportent pleinement les deux techniques. Si vous devez supporter IE, fournissez un fallback de couleur unie utilisant la couleur médiane du dégradé : déclarez border: 3px solid #888; avant la règle de dégradé, et IE utilisera celle-ci tandis que les navigateurs modernes appliqueront le dégradé.

Existe-t-il un moyen à une seule propriété de faire des bordures en dégradé ?

Pas encore en CSS standardisé. Les propositions modernes (brouillon CSS Backgrounds and Borders Module Level 4) incluent la propriété border-color acceptant directement les dégradés, mais les implémentations des navigateurs ne sont pas encore stables. L’approximation la plus proche actuelle est la technique mask-composite qui utilise un seul élément mais nécessite encore trois déclarations CSS. Espérons que d’ici 2027 ou 2028, border: 3px solid linear-gradient(...) fonctionnera juste.

Pourquoi ma bordure en dégradé semble-t-elle différente dans Safari ?

Safari est historiquement en retard sur Chrome et Firefox dans la parité des fonctionnalités CSS, surtout pour les valeurs mask-composite et certains cas limites de background-clip. Testez explicitement dans Safari. Si la technique du pseudo-élément échoue dans Safari, passez à border-image (qui fonctionne universellement mais perd border-radius), ou utilisez des préfixes spécifiques à Safari : -webkit-mask-composite peut être requis pour les anciennes versions de Safari. iOS Safari nécessite souvent le préfixe même dans les versions 2024.