Motifs de fond en CSS
Choisissez le motif et réglez les deux couleurs, la taille et l’épaisseur. Le fond est fait avec des dégradés CSS : aucun poids en plus et un rendu net sur tous les écrans.
Mode d’emploiDes fonds à motif, rien qu’en CSS
Disponible en: 
Motifs de fond en CSS: à quoi ça sert
Choisissez parmi huit motifs réalisés uniquement avec des dégradés CSS (pois, grille de points, quadrillage, lignes, rayures, diagonales, damier et zigzag) et réglez les deux couleurs, la taille et l’épaisseur. La miniature de chaque motif affiche déjà vos couleurs.
Le code n’utilise aucune image : il est léger et reste net quelle que soit la résolution.
Mode d’emploi
- Choisissez le motif.
- Réglez couleurs, taille et épaisseur.
- Copiez le CSS et appliquez la classe fundo.
Quand l’utiliser
- Fonds discrets pour les sections d’un site.
- En-têtes et bannières avec texture.
- Fonds de présentations et maquettes.
Questions fréquentes
Pourquoi faire le motif en CSS ?
Parce qu’il n’y a aucune image à télécharger : le navigateur dessine le motif avec des dégradés. Le code tient en quelques lignes, ne perd pas en qualité sur les écrans haute résolution et change de couleur en modifiant simplement les valeurs.
Comment rendre le motif discret ?
Utilisez deux couleurs très proches (par exemple fond #ffffff et motif #eef2f7) ou rendez la couleur du motif transparente. Des motifs marqués derrière du texte nuisent à la lecture.
Cela fonctionne-t-il sur tous les navigateurs ?
Oui. Les motifs utilisent linear-gradient, radial-gradient et repeating-linear-gradient, pris en charge par tous les navigateurs actuels.
Vraiment gratuit ?
Oui, 100 % gratuit. Sans inscription, sans abonnement et sans limite d’utilisation. Tous les outils de Tools123 sont gratuits.