Générateur CSS de motifs, gratuit

Motifs de fond CSS

Un motif d’arrière-plan CSS est une image carrelée (rayures, points, grilles, damiers, triangles) entièrement dessinée avec des fonctions de gradient CSS et sans fichier image. Trois propriétés font tout le travail : background-image peint n’importe quelle image de gradient dans l’élément, background-size définit la taille d’une tuile de cette image, et background-repeat (qui vaut repeat par défaut) carrelle cette image sur les deux axes. background-position décale ensuite la couture pour que la tuile de chaque couche s’aligne avec les autres. Un motif n’est donc que plusieurs images de gradient empilées les unes sur les autres, chacune dimensionnée à la même tuile, chacune positionnée pour s’imbriquer. Les navigateurs peignent les valeurs background-image séparées par des virgules de devant en arrière, donc la première image de la liste se trouve au-dessus de la deuxième, la deuxième au-dessus de la troisième, et ainsi de suite.

Tout le genre existe grâce à une astuce syntaxique : les arrêts de couleur durs. Des arrêts de couleur adjacents à la même position produisent une transition instantanée plutôt qu’un fondu. linear-gradient(red 50%, blue 50%) n’est pas un fondu du rouge au bleu, c’est une ligne nette. Sans arrêts durs vous obtenez un gradient lisse ; avec eux vous obtenez de la géométrie. Rayures, points, damiers, triangles, chevrons, chaque motif que cet outil émet est construit à partir de cette unique propriété, appliquée à différents angles et tailles de tuile.

Une brève histoire, Lea Verou et la galerie de motifs

Si une seule ressource est responsable de tout le genre des motifs d’arrière-plan en CSS pur, c’est la CSS3 Patterns Gallery de Lea Verou, hébergée à l’origine sur lea.verou.me/css3patterns/. Verou avait publié des démos individuelles tout au long de 2010 et au début de 2011, dont une démonstration célèbre de damier en février 2011, avant d’annoncer la galerie proprement dite le 15 avril 2011 dans un article intitulé « CSS3 patterns gallery and a new pattern » (le nouveau motif était un design de cubes japonais qu’elle a qualifié de plus difficile qu’elle ait jamais fait). Quelques mois plus tard, le 1er décembre 2011, elle a écrit l’essai canonique « CSS3 Patterns, Explained » pour le calendrier de l’Avent 24 ways, toujours la meilleure explication en français clair de la technique des arrêts de couleur durs qui sous-tend chaque rayure, point et damier. En juin 2015, O’Reilly a publié son livre CSS Secrets : Better Solutions to Everyday Web Design Problems, qui a élargi le chapitre sur les motifs en une taxonomie complète. L’impact culturel plus large de la galerie est documenté dans les notes de projet de Verou : elle a « lancé la pratique répandue d’utiliser des arrêts durs dans les gradients CSS pour créer facilement des motifs d’arrière-plan et d’autres graphiques » et a été utilisée plus tard par les ingénieurs d’Opera Software pour affiner leur implémentation des gradients.

Du préfixe vendeur à la spécification

Les gradients CSS sont définis dans le CSS Image Values and Replaced Content Module Level 3 (couramment « CSS Images 3 »), maintenu par le W3C CSS Working Group et édité entre autres par Tab Atkins Jr. et Elika J. Etemad. Le First Public Working Draft date du 12 juillet 2011 ; la spec a atteint Candidate Recommendation en avril 2012, verrouillant la syntaxe moderne sans préfixe, y compris la convention selon laquelle 0deg pointe vers le haut et to right équivaut à 90deg. Ordre de sortie des navigateurs : WebKit a été le premier de loin, avec -webkit-gradient() utilisable dans Safari 4 (2009) ; Firefox a livré -moz-linear-gradient() dans Firefox 3.6 (21 janvier 2010) ; Internet Explorer 10 a livré les formes non préfixées en 2012 ; la syntaxe non préfixée s’est stabilisée à travers tous les moteurs majeurs fin 2013. conic-gradient() a été spécifié dans CSS Images Level 4 parce que Level 3 était déjà entré en Last Call quand la syntaxe était en cours de conception ; il a été livré dans Chrome 69 (4 septembre 2018), Safari 12.1 (25 mars 2019) et Firefox 83 (17 novembre 2020). En 2026 vous pouvez écrire background: linear-gradient(...) et background: conic-gradient(...) en toute confiance sans préfixes ni fallbacks pour aucun navigateur qui mérite d’être pris en charge.

linear-gradient : angles et côtés

La grammaire formelle est linear-gradient([<angle> | to <side-or-corner>], <color-stop>, ...). La convention d’angle fait souvent trébucher les développeurs parce qu’elle diffère de la convention SVG/canvas. 0deg équivaut à to top (la ligne du gradient pointe vers le haut, donc la dernière couleur apparaît en haut de la boîte). 90deg équivaut à to right. 180deg équivaut à to bottom (le défaut si aucune direction n’est donnée). 270deg équivaut à to left. Les angles croissants tournent dans le sens horaire à partir du haut, l’opposé de la convention mathématique (où 0 est à droite et les angles croissent dans le sens antihoraire) et l’opposé du <linearGradient> de SVG. Une subtilité utile : to right et 90deg ne sont équivalents que sur des boîtes carrées. Sur une boîte non carrée, to top right produit une ligne de gradient exactement perpendiculaire à la diagonale partant du coin inférieur gauche (ce qui signifie que le gradient atteint le coin proprement) tandis que 45deg est toujours littéralement 45 degrés, indépendamment du rapport d’aspect. Cela compte moins pour les motifs carrelés (où les tuiles sont généralement carrées) mais beaucoup pour les fonds hero.

radial-gradient : formes, tailles et pois

La grammaire est radial-gradient([<shape> || <size>] [at <position>]?, <color-stop>, ...). Les deux valeurs de forme sont circle et ellipse (par défaut ellipse). La taille peut être l’un de quatre mots-clés d’étendue (closest-side, closest-corner, farthest-side ou farthest-corner (le défaut)) ou des longueurs/pourcentages explicites. Pour les motifs de pois, la recette canonique est radial-gradient(circle at center, #000 0 5px, transparent 5px) avec background-size: 20px 20px: un cercle noir de 5 px au centre de chaque tuile de 20 px, le reste étant transparent. Les points peuvent être décalés avec une deuxième couche à une demi-tuile pour produire une grille de points hexagonale. Pour des rayures pures vous n’avez pas besoin de dimensionner la tuile manuellement : repeating-linear-gradient(45deg, #000 0 10px, #fff 10px 20px) produit des rayures diagonales noir-et-blanc de 10 px de large, se répétant sur toute la boîte, sans nécessiter de déclaration background-size. Les gradients répétitifs ont aussi des homologues radial et conic, repeating-radial-gradient fait des anneaux concentriques, repeating-conic-gradient fait des moulins à vent.

conic-gradient : les camemberts et soleils que vous ne pouviez pas construire avant

conic-gradient() fait tourner les arrêts de couleur autour d’un centre plutôt que le long d’une ligne ou en partant d’un centre. Les arrêts de couleur sont positionnés en angles, pas en longueurs. L’histoire intellectuelle est l’une des histoires CSS les plus intéressantes : Lea Verou a rédigé une proposition conical-gradient() dès 2011, bien avant qu’un navigateur ne la supporte, et Tab Atkins Jr. a crédité son brouillon quand il a formellement ajouté la fonction à CSS Image Values Level 4. L’implémentation a traîné des années. En juin 2015, Verou a écrit un polyfill (utilisant SVG et sa bibliothèque -prefix-free) et l’a publié sur scène à CSSConf, intitulant le post « Conical gradients, today! » L’arrivée native a eu lieu dans Chrome 69 (4 septembre 2018), Safari 12.1 (25 mars 2019), et Firefox 83 (17 novembre 2020). Ce que les gradients coniques débloquent que linéaire et radial ne peuvent pas : camemberts et donut charts sans canvas, SVG ou JS (conic-gradient(red 0 25%, blue 25% 60%, green 60% 100%) plus border-radius: 50% est un camembert complet) ; roues chromatiques (conic-gradient(red, yellow, lime, aqua, blue, magenta, red) produit la roue de teintes standard) ; motifs de rayons et étoiles à partir de couleurs alternées en arrêts durs à de petits intervalles d’angle ; cadres de gradient et reflets de coin angulaires ; et damiers en une seule déclaration (repeating-conic-gradient(#000 0 25%, #fff 0 50%) plus background-size produit un damier avec une seule couche de gradient au lieu de deux gradients linéaires empilés).

Performance : quand les motifs CSS battent les images, et quand ils ne le font pas

L’argument de performance pour les motifs en CSS pur est celui qu’il vaut le plus la peine de bien comprendre parce qu’il est trop simplifié dans la copie marketing. Gains du CSS pur : pas de requête HTTP, pas de décodage, pas de surcharge PNG/JPEG/WebP (une règle CSS de 4 lignes remplace un fichier binaire ; indépendant de la résolution vectorielle) un motif a l’air identique à 1×, 2×, 3× device pixel ratio sans nécessité d’expédier des assets @2x et @3x, ce qui est la plus grande raison pour laquelle les design systems préfèrent les motifs de gradient aux PNG pour les écrans rétina ; trivialement recolorables, changer une variable CSS met à jour tout le motif ; animables via background-position ou, avec @property, via des arrêts de couleur animables. Coûts à connaître : le coût de peinture évolue avec les pixels touchés et la complexité du gradient, les gradients sont parmi les opérations de peinture les plus coûteuses aux côtés des grandes box-shadows, des SVG complexes et des effets de texte lourds, et empiler de nombreuses couches de gradient sur un hero pleine fenêtre peut coûter des frames sur les GPU bas de gamme. Animer les couleurs du gradient déclenche des repaints complets à chaque frame (cela change avec les propriétés personnalisées enregistrées via @property dans Chromium et Firefox, mais il reste plus sûr d’animer background-position à la place). L’heuristique pratique : si vous avez un motif unique pleine fenêtre et que vous ne l’animez pas, vous ne remarquerez rien. Si vous empilez cinq couches de gradient sur chaque carte d’une longue liste, profilez-le.

Accessibilité : contraste, décoration et mouvement réduit

Les motifs d’arrière-plan CSS sont, par définition, décoratifs. Ils n’apparaissent ni dans l’arbre du document ni dans l’arbre d’accessibilité ; du point de vue d’une technologie d’assistance, ils n’existent simplement pas. C’est en grande partie une fonctionnalité, le tutoriel WAI du W3C sur les images décoratives dit explicitement que l’imagerie décorative « devrait être fournie en utilisant des images de fond CSS plutôt que » des <img> afin qu’elle soit naturellement ignorée par les lecteurs d’écran. Mais le contraste s’applique toujours à tout ce que vous mettez par-dessus le motif. Le critère de succès WCAG 2.1 1.4.3 exige un ratio de contraste de 4,5:1 pour le texte normal et 3:1 pour le texte large. Les motifs rendent cela plus difficile parce que la luminance locale du fond varie pixel par pixel. La technique WCAG G18 traite cela directement : si le fond est à motifs, le fond autour des lettres peut être choisi ou ombré pour que les lettres maintiennent un ratio de contraste de 4,5:1 avec le fond derrière elles, même si elles n’ont pas ce ratio avec l’ensemble du fond. En pratique : si vous mettez du texte par-dessus un motif, choisissez soit des couleurs de motif avec une luminance similaire entre elles, soit placez une carte de couleur unie entre le texte et le motif. WCAG 2.1 exige aussi un contraste de 3:1 pour les composants UI non textuels et les graphiques, ce qui peut s’appliquer aux icônes et séparateurs basés sur des motifs. Si votre motif est animé (une rayure défilante, une coniqu en rotation lente, un squelette miroitant) enveloppez l’animation dans @media (prefers-reduced-motion: no-preference). La motivation est médicale, pas stylistique : les animations peuvent déclencher des symptômes vestibulaires (nausées, vertiges), des crises chez les utilisateurs atteints d’épilepsie photosensible, et des migraines.

Motifs SVG vs gradients CSS : une comparaison équitable

L’élément <pattern> de SVG est le frère spirituel des gradients CSS. Tous deux vous permettent de carreler une cellule unitaire sur une zone de remplissage. Ils ont des points forts différents. Les motifs SVG gagnent quand l’unité est une forme complexe (une feuille, une écaille de poisson, un hexagone irrégulier) que les gradients ne peuvent pas exprimer naturellement ; quand vous voulez expédier un asset créé par un designer (Hero Patterns par Steve Schoger, lancé le 27 septembre 2016 sous CC BY 4.0, est la bibliothèque canonique de motifs SVG) ; quand vous avez besoin d’une géométrie vectorielle précise pour des courbes nettes que les arrêts durs de gradient ne peuvent qu’approximer ; ou quand vous voulez que le motif soit réutilisé sur plusieurs éléments SVG via fill="url(#myPattern)". Les gradients CSS gagnent quand le motif est géométrique, rayures, points, grilles, damiers, chevrons, triangles, tout ce qui peut se composer à partir de lignes droites et de cercles ; quand vous voulez zéro surcharge HTTP ; quand vous avez besoin d’une personnalisation par instance via des variables CSS (--stripe-color: red met à jour le motif instantanément) ; quand vous voulez appliquer le motif comme fond CSS à n’importe quel élément HTML, pas uniquement à l’intérieur d’un SVG ; ou quand vous voulez animer le motif sans éléments <animate>. Une technique hybride courante consiste à inliner un SVG comme une URL data:image/svg+xml,... dans background-image: cela donne le gain « pas de requête HTTP supplémentaire » du CSS pur tout en laissant les designers exprimer des formes arbitraires. Le revers est la complexité d’encodage : # devient %23, les guillemets doubles doivent être échappés, et inspecter le SVG dans les DevTools est gênant. Ce générateur émet des motifs en gradient CSS pur ; le compromis est intentionnel, simplicité et petit payload plutôt que flexibilité maximale de forme.

Là où les motifs CSS gagnent leur croûte

Le genre est plus large que le papier peint. Les usages réels en production incluent :

• Fonds de section hero. Des motifs subtils à grande échelle derrière le titre de la page (lignes diagonales, gros points, un soleil conic-gradient doux) donnent au hero une texture visuelle sans ajouter de poids image.
• Placeholders d’état vide. Quand une liste n’a aucun élément, un motif de damier ou de grille dans la zone vide communique « ceci est intentionnellement vide » mieux qu’un espace blanc plat.
• Squelettes de chargement. Le squelette « shimmer » classique est un linear-gradient avec du blanc semi-transparent qui se déplace à travers un fond gris, animé via background-position. La technique est désormais un standard UX.
• Fonds de cartes et de badges. Une faible grille de points derrière un badge « Pro » ou un pin-stripe diagonal derrière une carte feature ajoute de la texture sans concurrencer le texte.
• États d’erreur et d’avertissement. Des rayures diagonales répétitives (le motif cône de chantier) signalent intuitivement « zone d’avertissement ». repeating-linear-gradient(45deg, #fbbf24 0 10px, #1f2937 10px 20px) est l’overlay « attention » universel.
• Esthétiques rétro et synthwave. La grille Tron des années 80 (une grille magenta déformée en perspective roulant vers un horizon) est un effet en CSS pur construit à partir d’un repeating-linear-gradient plus transform: perspective(...) rotateX(...).
• Séparateurs de section. Une courte bande pleine largeur de motif entre les sections rompt une longue page sans ajouter de poids sémantique.
• Perforations adaptées à l’impression. Les lignes de perforation pointillées/tiretées pour billets et coupons imprimables sont plus faciles à créer avec repeating-linear-gradient qu’avec SVG.
• Motifs mode clair/sombre. Les motifs s’échangent bien entre mode clair et mode sombre parce qu’ils sont pilotés par variables CSS ; une seule déclaration s’adapte aux deux palettes.

Comment utiliser

1. Choisissez un type de motif : sélectionnez rayures, points, damier, grille, zigzag, triangles et plus encore, tous en CSS pur.
2. Personnalisez couleurs et échelle : ajustez couleurs de premier et d'arrière-plan, taille du motif, angle et espacement avec les curseurs.
3. Prévisualisez en direct : le motif s'affiche en temps réel pendant que vous modifiez les réglages.
4. Copiez le CSS : copiez la propriété background générée et collez-la dans votre feuille de style.

Questions fréquentes

Le CSS fonctionnera-t-il dans les navigateurs plus anciens ?

Tout navigateur moderne majeur livre linear-gradient, radial-gradient et les variantes répétitives non préfixés et activés par défaut, le nettoyage s’est achevé fin 2013. conic-gradient a pris plus de temps (Chrome 69 en septembre 2018, Safari 12.1 en mars 2019, Firefox 83 en novembre 2020) mais est aussi universel en 2026. Le générateur n’émet pas de préfixes vendeurs parce qu’aucun n’est nécessaire pour un navigateur qui mérite d’être pris en charge. Microsoft Edge a abandonné son moteur EdgeHTML en janvier 2020 et IE11 a atteint sa fin de vie le 15 juin 2022 ; tous deux sont désormais des notes de bas de page historiques pour tout nouvel outil.

Les motifs CSS sont-ils plus rapides que les fonds en image carrelée ?

Pour les motifs statiques, oui, un motif CSS élimine une requête HTTP, une passe de décodage, et l’expédition d’assets multi-résolution requise pour les écrans rétina. Le motif est aussi vectoriellement parfait à n’importe quel zoom et trivialement recolorable via les variables CSS. Le compromis est le coût de peinture : les gradients sont parmi les choses les plus coûteuses qu’un navigateur peut peindre, et empiler de nombreuses couches de gradient à travers un hero pleine fenêtre peut coûter des frames sur les GPU bas de gamme. Pour un seul motif statique sur une carte ou une section, vous ne remarquerez rien. Si vous vous retrouvez à empiler cinq couches de gradient sur chaque élément d’une longue liste, profilez avant de livrer.

Comment mettre du texte par-dessus un motif de manière accessible ?

WCAG 2.1 SC 1.4.3 exige un contraste de 4,5:1 pour le texte normal et 3:1 pour le texte large par rapport au fond. Avec un fond à motifs, la luminance locale varie pixel par pixel, ce qui peut faire échouer le contraste dans le pire des cas même si le contraste moyen a l’air correct. Deux stratégies sûres : choisir des couleurs de motif avec une luminance similaire entre elles (afin que le contraste avec votre texte soit cohérent sur toute la tuile), ou placer une carte de couleur unie entre le texte et le motif. Mettre du texte directement sur un motif à fort contraste (par exemple des rayures noir-et-blanc) est le cas où les vérificateurs de contraste et les lecteurs humains peinent tous deux.

Puis-je animer le motif ?

Oui. L’animation la moins coûteuse est de décaler background-position avec @keyframes: cela déclenche une mise à jour uniquement par compositeur sur la plupart des navigateurs et peut tourner en douceur à 60 fps. Animer les couleurs du gradient elles-mêmes est plus coûteux parce que chaque frame déclenche une peinture complète ; Chromium et Firefox modernes peuvent atténuer cela avec les propriétés personnalisées enregistrées par @property, mais background-position est le défaut plus sûr. Enveloppez toujours l’animation dans @media (prefers-reduced-motion: no-preference): les fonds animés peuvent déclencher des symptômes vestibulaires, des crises et des migraines pour les utilisateurs sensibles.

Pourquoi mon motif a-t-il l’air flou sur les écrans rétina ?

Il ne devrait pas, c’est tout l’intérêt d’utiliser des gradients plutôt que des images bitmap. Si le vôtre l’est, vérifiez que les arrêts de couleur sont à des pourcentages nets (un arrêt dur est deux arrêts à la même position ; un léger écart même de 50% 50.1% introduit une bande de flou visible) et que le dimensionnement de la tuile est en px plutôt qu’en em ou %, qui peuvent interagir de façon imprévisible avec la mise à l’échelle du texte. Les gradients coniques sur les anciennes versions de Safari rendaient le centre comme une zone légèrement floue ; Safari et Chrome modernes rasterisent tous deux sur le GPU et le problème a largement disparu.

Mes données sont-elles envoyées quelque part ?

Non. La sélection de motif, le choix des couleurs, le dimensionnement et la génération CSS s’exécutent tous dans votre navigateur. Il n’y a aucune requête sortante lorsque vous utilisez les contrôles, vous pouvez vérifier dans l’onglet Réseau des DevTools. Le CSS généré est à vous, à coller où vous voulez.

Outils associés