Toolzi LogoToolzi

Générateur de Bordure Dégradée CSS

Générez du code CSS de bordure dégradée instantanément avec un aperçu en direct.

135°
0%
100%

Aperçu

Code CSS

.element {
  background:
    linear-gradient(#1a1a2e, #1a1a2e) padding-box,
    linear-gradient(135deg, #6366f1 0%, #ec4899 100%) border-box;
  border: 3px solid transparent;
  border-radius: 12px;
}

Qu'est-ce qu'une bordure dégradée CSS ?

CSS ne supporte pas les couleurs de bordure dégradées via border-color. Cet outil utilise l'astuce background-clip — en superposant deux arrière-plans découpés en padding-box et border-box respectivement.

Types de Dégradé

Dégradé Linéaire

Les couleurs transitionnent en ligne droite selon l'angle spécifié. Idéal pour des effets de bordure directionnels comme de haut en bas ou en diagonale.

Dégradé Conique

Les couleurs tournent autour d'un point central. Appliqué à une bordure, cela crée un effet arc-en-ciel qui enveloppe tout l'élément.

Comment utiliser

Sélectionnez un type de dégradé (Linéaire ou Conique), configurez l'angle et les points de couleur, ajustez l'épaisseur et le rayon de la bordure, puis copiez le code CSS généré.

Questions Fréquentes

Puis-je appliquer un dégradé directement à border-color ?
Non. CSS border-color ne supporte que les couleurs unies. Cet outil utilise l'astuce background-clip pour créer des bordures dégradées sans JavaScript.
Quelle est la différence entre les bordures à dégradé linéaire et conique ?
Le dégradé linéaire s'écoule dans une direction (ex. de haut en bas). Le dégradé conique tourne autour de l'élément, affichant toutes les couleurs sur l'ensemble de la bordure.
Est-ce supporté dans tous les navigateurs ?
La méthode background-clip fonctionne dans les versions modernes de Chrome, Firefox, Safari et Edge. Internet Explorer n'est pas supporté.
Comment utiliser une bordure dégradée avec Tailwind CSS ?
Tailwind ne supporte pas nativement les bordures dégradées. Ajoutez le CSS généré à @layer utilities ou appliquez-le en style inline.
Qu'est-ce qu'une bordure avec dégradé conique ?
Une bordure avec dégradé conique applique des couleurs tournant autour d'un point central, créant des effets arc-en-ciel ou de rotation.
Puis-je animer une bordure dégradée ?
Oui. Vous pouvez animer l'angle de conic-gradient avec @keyframes et des propriétés CSS personnalisées pour créer une bordure dégradée tournante.

Outils Associés

CSS Gradient Generator →CSS Gradient Text Generator →