Aller au contenu
arnaud.app

Générateur de dégradé répété (rayures et motifs)

Générateur de repeating-linear-gradient gratuit avec aperçu en direct. Créez rayures, bandes et motifs d'enseigne de barbier à partir d'arrêts serrés - copiez le CSS, sans inscription.

Fonctionne dans votre navigateur

Un dégradé répété carrelle ses arrêts de couleur encore et encore au lieu de les étirer sur l'élément. Rapprochez les arrêts, réglez l'angle, et vous obtenez des rayures CSS nettes, des bandes, un damier ou une enseigne de barbier - le tout généré en direct en `repeating-linear-gradient()`. Sans image, sans requête HTTP supplémentaire.

background: repeating-linear-gradient(135deg, #0a7cff 0%, #a855f7 100%);

Comment l'utiliser

  1. Choisissez un type ou un préréglage

    Linéaire, radial ou conique (ou une variante répétée), ou chargez un préréglage pour partir d'un beau rendu.

  2. Façonnez le dégradé

    Glissez l'angle, réglez la forme et la position radiales, et modifiez les arrêts sur la barre - cliquez pour ajouter, glissez une poignée pour déplacer.

  3. Affinez la couleur

    Réglez l'opacité de chaque arrêt et activez OKLCH pour des fondus plus doux et plus vifs entre couleurs saturées.

  4. Copiez ou partagez

    Copiez le CSS `background` prêt à l'emploi, ou utilisez Copier le lien pour partager le dégradé exact.

Qu'est-ce que c'est ?

Un dégradé CSS est un fondu lisse et indépendant de la résolution entre deux couleurs ou plus, dessiné par le navigateur sans fichier image. Ce générateur construit la fonction complète `linear-gradient()`, `radial-gradient()` ou `conic-gradient()` (et leurs variantes répétées) à partir d'une liste d'arrêts - chacun avec une couleur, une position et une opacité. Étant du CSS pur, un dégradé s'adapte à toute taille, coûte presque rien à afficher et ne pixelise jamais.

Quand l'utiliser

Optez pour un dégradé quand vous voulez de la profondeur sans le poids d'une image : fonds de hero et de sections, surbrillances de boutons et de cartes, surimpressions vitrées, accents de marque, surfaces en mode sombre, ou fondu d'une photo vers la couleur de la page. Les dégradés coniques font office de camemberts, de roues chromatiques et de spinners ; les dégradés répétés créent rayures, grilles et motifs.

Erreurs courantes

Multiplier les arrêts rend le dégradé chargé - deux ou trois suffisent souvent. Mélanger des complémentaires saturées (rouge vers vert) en sRGB donne un milieu boueux ; ajoutez un point neutre ou activez OKLCH. N'oubliez pas un repli `background-color` pour le rare navigateur qui ne sait pas lire votre syntaxe, et souvenez-vous que les dégradés très subtils peuvent disparaître sur les écrans de mauvaise qualité.

FAQ

Quelle différence entre dégradé linéaire, radial et conique ?
Un dégradé linéaire mélange les couleurs le long d'une ligne droite, selon un angle. Un dégradé radial rayonne depuis un centre, en cercle ou en ellipse. Un dégradé conique fait tourner les couleurs autour d'un point, comme une aiguille d'horloge - parfait pour les roues chromatiques et les camemberts. Cet outil génère les trois, plus leurs variantes répétées.
Pourquoi mon dégradé paraît-il strié ou boueux au milieu ?
Par défaut, CSS mélange les couleurs en sRGB, ce qui peut donner un milieu sombre et boueux entre deux couleurs saturées. Activez OKLCH : l'outil produit alors `linear-gradient(in oklch, ...)`, qui mélange dans un espace perceptuellement uniforme pour des transitions plus douces et plus vives dans les navigateurs récents.
Puis-je ajouter de la transparence ?
Oui. Chaque arrêt dispose d'un curseur d'opacité ; en dessous de 100 %, l'outil l'exprime en couleur `rgba()`. Faire disparaître un dégradé en transparence est l'astuce derrière les surimpressions d'images, les fondus « lire la suite » et les séparateurs discrets.
Combien d'arrêts de couleur puis-je utiliser ?
Autant que vous voulez - cliquez la barre ou « Ajouter un arrêt », puis glissez les poignées pour les repositionner. Deux ou trois arrêts donnent souvent le meilleur rendu ; trop d'arrêts trop proches et le dégradé devient chargé.
Que contrôle l'angle ?
Pour les dégradés linéaires, l'angle donne la direction du fondu : 0° vers le haut, 90° vers la droite, 180° vers le bas. Pour les coniques, il fixe le départ de la rotation. Les dégradés radiaux n'ont pas d'angle - vous réglez plutôt la forme et la position du centre.
Comment faire des rayures ou une bordure nette plutôt qu'un fondu ?
Donnez la même position à deux arrêts (50 % tous les deux, par exemple) et la couleur change net, sans fondu : c'est un arrêt dur. Utilisez un dégradé linéaire répété avec des arrêts serrés pour des rayures, un damier ou un motif d'enseigne de barbier.
Puis-je utiliser la sortie avec Tailwind ou en background-image ?
L'outil produit une valeur `background:` standard. Utilisez-la telle quelle, ou placez-la dans `background-image` si vous voulez aussi un repli `background-color`. Avec Tailwind, glissez-la dans une valeur arbitraire comme `bg-[linear-gradient(...)]`.

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

Dégradés CSS linéaires, radiaux et coniques avec aperçu en direct, préréglages et copie en un clic.

Essayer →

Plus dans cette catégorie