Générateur de modèle d'arrière-plan CSS Créez des modèles d'arrière-plan CSS répétitifs, y compris des rayures, un damier, des points et bien plus encore.

Les motifs d'arrière-plan CSS utilisent des fonctions de gradient avec une taille et une position d'arrière-plan précises pour créer des tuiles répétitives sans couture. Les rayures utilisent un repeating-linear-gradient avec des arrêts de couleur alternés. Les damiers utilisent quatre gradients linéaires superposés à 45 et -45 degrés. Les points utilisent un radial-gradient avec un petit rayon et une taille d'arrière-plan correspondante. Les grilles utilisent deux gradients linéaires (horizontal et vertical) avec des arrêts de couleur fins. La clé pour obtenir des motifs sans couture est de s'assurer que la taille d'arrière-plan correspond aux mathématiques du gradient. Les décalages de position d'arrière-plan peuvent créer des dispositions plus complexes. Ces motifs sont rendus par le GPU et ont un impact minimal sur les performances. Ils s'adaptent parfaitement à n'importe quelle résolution. Pour les motifs complexes, plusieurs couches d'arrière-plan sont empilées en utilisant des valeurs d'image d'arrière-plan séparées par des virgules. Chaque couche peut avoir sa propre taille et position d'arrière-plan.