Bibliothèque de modèles CSS
Parcourez plus de 55 motifs d'arrière-plan en CSS pur organisés par catégorie : points, rayures, carreaux, vagues, géométrique, grille, diagonale, pois, tissage et zigzag. Cliquez sur n’importe quel motif pour copier instantanément la valeur d’arrière-plan CSS prête à l’emploi. Tous les modèles utilisent uniquement des propriétés de dégradé CSS : pas d'images, pas de fichiers externes, aucune inscription requise.
Showing 55 of 55 patterns
Polka Dots
Classic evenly-spaced polka dot pattern
Large Dots
Big polka dots for playful backgrounds
Tiny Dots
Subtle micro-dot texture
Offset Dots
Dots arranged in staggered grid
Colored Dots
Playful multi-tone dot pattern
Dot Grid
Precise dot grid for technical layouts
Horizontal Stripes
Classic horizontal pinstripe pattern
Vertical Stripes
Clean vertical stripe pattern
Thick Stripes
Bold wide stripe pattern
Colorful Stripes
Rainbow multi-color stripe pattern
Candy Stripes
Alternating thin candy-colored stripes
Barber Pole
Classic barber shop diagonal stripe
Subtle Stripes
Very subtle light stripe for minimal backgrounds
Slim Stripes
Ultra-thin vertical pinstripes
Checkerboard
Classic black and white checkerboard
Small Check
Tight checkerboard pattern
Gingham
Soft gingham picnic pattern
Blue Gingham
Classic blue gingham pattern
Graph Paper
Engineering graph paper grid
Blueprint Grid
Blue grid reminiscent of blueprints
Sine Wave
Smooth undulating wave pattern
Ocean Waves
Layered ocean-inspired wave pattern
Ripple
Concentric ripple effect
Sound Wave
Audio spectrum visualizer pattern
Hexagons
Honeycomb hexagonal tessellation
Triangles
Repeating triangle pattern
Diamonds
Diamond tessellation pattern
Circles
Overlapping circle pattern
Arrows
Directional arrow pattern
Zigzag Top
Zigzag border pattern that repeats
Fine Grid
Tight grid for technical backgrounds
Dot Grid
Grid made of dots at intersections
Major/Minor Grid
Grid with major and minor lines
Isometric Grid
Isometric/perspective grid pattern
Diagonal Stripes
Clean diagonal stripe pattern
Reverse Diagonal
Opposite angle diagonal stripes
Crosshatch
Crosshatch/checkered diagonal pattern
Hatching
Fine art hatching pattern
Bold Diagonal
Thick bold diagonal stripes
Colored Diagonals
Multi-color diagonal pattern
Confetti
Celebratory confetti pattern
Stars
Tiny star-like pattern
Leopard Spots
Organic spotted pattern
Basket Weave
Woven basket texture
Herringbone
Classic herringbone pattern
Waffle
Waffle/woven texture
Brick
Brick wall pattern
Zigzag Wave
Sharp zigzag wave pattern
Lightning Bolt
Sharp angular zigzag like lightning
Sawtooth
Sawtooth edge pattern
Maze
Intricate maze-like pattern
Retro Diamond
Retro 70s diamond pattern
Fishtail
Fishtail/scallop pattern
Bubbles
Bubbly circle pattern
Concentric Squares
Concentric square pattern
À propos des modèles d'arrière-plan CSS
- Les motifs d'arrière-plan CSS sont des textures répétitives décoratives créées entièrement avec les propriétés d'arrière-plan CSS - variantes linéaire-gradient(), radial-gradient(), conic-gradient() et répétition-*. Contrairement aux modèles basés sur des images, les modèles CSS ne nécessitent aucune requête HTTP, évoluent à l'infini sans pixellisation et peuvent être recolorés instantanément en modifiant quelques valeurs de couleur dans le CSS.
- Chaque motif de cette bibliothèque utilise un ou plusieurs calques d'arrière-plan CSS composés de dégradés et de tuiles d'arrière-plan de taille fixe (background-size). La nature répétitive des arrière-plans CSS signifie qu’une seule petite vignette est automatiquement dessinée sur l’ensemble de l’élément. Cette technique maintient le CSS minimal - la plupart des modèles sont une seule ligne de CSS d'arrière-plan.
- Chaque modèle utilise des couleurs CSS explicitement nommées (comme #333, #ff6b6b) que vous pouvez rechercher et remplacer pour correspondre à la palette de votre marque. Remplacez les valeurs de couleur dans le CSS après la copie pour modifier instantanément les couleurs du motif. Pour une utilisation avancée, remplacez les couleurs littérales par des propriétés personnalisées CSS (var(--color-primary)) pour créer des motifs thématiques.
- Tous les modèles utilisent les fonctionnalités CSS standard prises en charge dans tous les navigateurs modernes (Chrome, Firefox, Safari, Edge). Les modèles d'arrière-plan CSS n'ont aucun coût en termes de performances d'exécution : ils sont peints une seule fois par le compositeur du navigateur et ne consomment aucune mémoire GPU au-delà de la sortie rendue. Ils fonctionnent hors ligne, n'ont pas de taille de paquet et ne provoquent jamais de changements de disposition.
Foire aux questions
Une bibliothèque de motifs CSS est une collection organisée de motifs d'arrière-plan purement CSS (points, rayures, carreaux, vagues, formes géométriques, etc.) que vous pouvez parcourir, prévisualiser et copier en un seul clic. Contrairement aux fichiers image, les modèles CSS contiennent uniquement du code : ils se chargent instantanément, évoluent à l'infini et peuvent être recolorés en modifiant quelques valeurs de couleur.
Cliquez sur le bouton "Copier CSS" sur n'importe quelle carte de modèle. La déclaration d'arrière-plan CSS complète est copiée dans votre presse-papiers. Collez-le dans votre feuille de style : .my-element { background: radial-gradient(...); }.
Oui, toutes les couleurs sont des valeurs hexadécimales explicites. Remplacez n'importe quelle valeur de couleur par les couleurs de votre marque. Pour les thèmes avancés, remplacez les couleurs par des propriétés personnalisées CSS.
Les modèles CSS ne nécessitent aucune requête HTTP, n'ont aucune taille de fichier, s'adaptent à l'infini sans pixellisation, ne provoquent jamais de changements de mise en page et peuvent être recolorés instantanément, ce qui les rend supérieurs aux modèles basés sur des images dans la plupart des cas.
Oui. Utilisez une syntaxe de valeur arbitraire : bg-[radial-gradient(...)] bg-[length:20px_20px], ou ajoutez le modèle à votre tailwind.config.js sous theme.extend.backgroundImage.
Oui - CSS prend en charge plusieurs calques d'arrière-plan séparés par des virgules. Superposez un motif sur un dégradé ou sur un autre motif.
La valeur background-size contrôle la densité du motif. Une taille plus petite produit un motif plus dense ; une taille plus grande le rend plus étalé.
Oui. Tous les modèles sont du code CSS standard et peuvent être utilisés librement dans des projets personnels et commerciaux sans attribution.
Absolument. L'utilisation du code CSS de cette bibliothèque dans des sites Web commerciaux, des applications Web, des produits SaaS et des projets clients est autorisée sans restriction.