3BearLabs3Bear Tools
Images

Générateur de motifs CSS : rayures, points et plus

Choisissez un motif, réglez deux couleurs et une taille, puis copiez du CSS pur que vous pouvez utiliser comme arrière-plan.

Fonctionne dans votre navigateur : les fichiers ne quittent pas cet appareil.

Générateur de Motifs CSS

Générez des motifs d'arrière-plan transparents et obtenez le CSS instantanément.

#FFFFFF
#E2E8F0
background-color: #FFFFFF; background-image: repeating-linear-gradient(45deg, #E2E8F0, #E2E8F0 10px, #FFFFFF 10px, #FFFFFF 20px);

Comment l'utiliser

  1. Sélectionnez un type de motif : rayures, points, damier ou zigzag.
  2. Réglez la couleur principale, la couleur d'accent et la taille en pixels.
  3. Regardez l'aperçu, puis copiez le CSS avec le bouton de copie.

Ce générateur crée des motifs répétitifs uniquement avec des dégradés CSS : aucun fichier image à héberger. La Couleur principale est l'arrière-plan de base, et la Couleur d'accent sert aux rayures, points ou carrés dessinés par-dessus. La taille est en pixels, de 10 à 100, et elle contrôle la dimension de chaque répétition.

Rayures crée des lignes diagonales à 45 degrés, chaque rayure faisant la moitié de la valeur de taille. Points dessine de petits cercles sur une grille. Damier produit un damier bicolore. Zigzag crée une onde triangulaire répétée. Chaque type renvoie quelques lignes de CSS qui définissent une couleur d'arrière-plan, une image d'arrière-plan faite de dégradés et, si nécessaire, une taille et une position d'arrière-plan.

Pour utiliser un motif, collez les déclarations copiées dans la règle de n'importe quel élément, par exemple un conteneur ou le body. Vous pouvez ensuite modifier les couleurs ou la taille dans votre propre feuille de style. Comme les motifs sont construits à partir de dégradés, ils s'adaptent proprement à l'échelle et n'ajoutent aucune requête réseau supplémentaire.

Tout est généré dans votre navigateur, et rien n'est envoyé.

FAQ

Quels motifs sont disponibles ?

Rayures, points, damier et zigzag.

Ai-je besoin de fichiers image ?

Non. Les motifs utilisent des dégradés CSS : il n'y a aucune image à héberger ou à charger.

Que modifie le contrôle de taille ?

La dimension en pixels d'une répétition du motif. Des valeurs plus grandes donnent un motif plus grand.

Puis-je utiliser le CSS sur n'importe quel élément ?

Oui. Collez les déclarations dans la règle de n'importe quel élément où vous voulez l'arrière-plan.

Ma saisie est-elle envoyée ?

Non. Le CSS est construit dans votre navigateur.

Outils associés