10 modèles d'arrière-plan CSS que vous pouvez utiliser sur votre site Web

Les motifs d'arrière-plan peuvent changer radicalement l'apparence de votre site Web. Vous pouvez facilement créer des motifs d'arrière-plan élégants à l'aide de CSS qui feront passer la conception de votre site au niveau supérieur.

Vous trouverez ci-dessous une liste de 10 motifs d'arrière-plan que vous pouvez utiliser dans vos projets.

1. L'hexagone noir

Le code de ces exemples est disponible dans un Référentiel GitHub et est libre d'utilisation sous le Licence MIT.

Ce motif hexagonal noir fournit un arrière-plan de réseau hexagonal très net. Le titre est clairement visible sur ce fond. Vous pouvez utiliser ce modèle si vous concevez des sites Web technologiques ou architecturaux.

Code HTML

<h1>L'hexagone noir</h1>

Code CSS

corps {
 famille de polices: 'Partager la technologie', sans empattement ;
 taille de police: 68px ;
 Couleur blanche;
 affichage: flexible ;
 justifier-contenu: centre ;
 align-items: center ;
 marge: 0 ;
 largeur: 100vw ;
 hauteur: 100vh ;
 ombre de texte: 8pixels 8pixels 10pixels 





instagram viewer

#0000008c ;
 Couleur de l'arrière plan: #343a40 ;
 image de fond: url("données: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' largeur='28' hauteur='49' viewBox='0 0 28 49'%3E%3Cg fill-rule='même bizarre'%3E%3Cg identifiant='hexagones' remplir='%239C92AC' fill-opacity='0.25' règle-de-remplissage='non nul'%3E%3Cchemin d='M13.99 9.25l13 7.5v15l-13 7.5L1 31.75v-15l12.99-7.5zM3 17.9v12.7l10.99 6.34 11-6.35V17.9l-11-6.34L3 17.9zM0 15l12.98-7.5V0h-2v6 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h-2zm0 49v-8l12.99-7.5H28v2.11h-.01L7 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), dégradé linéaire (en haut à droite, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 marge: 20px ;
}

2. Les bandes bleues

Le motif de fond des bandes bleues utilise le gradient linéaire Propriété CSS pour créer des bandes de dégradé sur un arrière-plan. Tu peux changer la couleur de fond et la couleur du dégradé pour répondre à vos exigences.

Code HTML

<classe div="modèles pt1"></div>

Code CSS

corps {
 marge: 0px ;
}
.motifs {
 largeur: 100vw ;
 hauteur: 100 vw ;
}
.pt1 {
 taille d'arrière-plan: 50px 50px ;
 Couleur de l'arrière plan: #0ae ;
image de fond: -webkit-linéaire-gradient(RVB(255, 255, 255, .2) 50%, transparent 50%, transparent);
image de fond: -moz-linéaire-gradient(RVB(255, 255, 255, .2) 50%, transparent 50%, transparent);
image de fond: -ms-linéaire-gradient(RVB(255, 255, 255, .2) 50%, transparent 50%, transparent);
image de fond: -o-linéaire-gradient(RVB(255, 255, 255, .2) 50%, transparent 50%, transparent);
image de fond: gradient linéaire(RVB(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

3. L'échiquier

Vous pouvez facilement créer un modèle de conception d'arrière-plan d'échiquier à l'aide de CSS. Essayez d'ajuster les couleurs pour varier cette conception.

Code HTML

<classe div="modèles pt1"></div>

Code CSS

corps {
 marge: 0px ;
}
.motifs {
 largeur: 100vw ;
 hauteur: 100 vw ;
}
.pt1 {
 Couleur de l'arrière plan: #eee ;
 taille d'arrière-plan: 60px 60px ;
 position d'arrière-plan: 0 0, 30px 30px ;
 image de fond: -webkit-linear-gradient (45 degrés, noir 25 %, transparent 25 %, transparent 75 %, noir 75%, noir), -webkit-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75%, noir 75%, le noir);
 image d'arrière-plan: -moz-linear-gradient (45 degrés, noir 25 %, transparent 25 %, transparent 75 %, noir 75%, noir), -moz-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75%, noir 75%, le noir);
 image de fond: -ms-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75%, noir 75%, noir), -ms-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75%, noir 75%, le noir);
 image de fond: -o-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75%, noir 75%, noir), -o-linear-gradient (45deg, noir 25%, transparent 25%, transparent 75 %, noir 75 %, noir);
 image d'arrière-plan: dégradé linéaire (45 deg, noir 25 %, transparent 25 %, transparent 75 %, noir 75 %, noir), dégradé linéaire (45 deg, noir 25 %, transparent 25 %, transparent 75 %, noir 75 %, le noir);
}

4. La mer silencieuse

Vous pouvez utiliser ces simples motifs de lignes horizontales pour ajouter un arrière-plan statique à n'importe quel élément HTML.

Code HTML

<classe div="modèles pt1"></div>

Code CSS

corps {
 marge: 0px ;
}
.motifs {
 largeur: 100vw ;
 hauteur: 100 vw ;
}
.pt1 {
 Couleur de l'arrière plan: #026873;
 taille d'arrière-plan: 13px 13px, 29px 29px, 37px 37px, 53px 53px ;
image de fond: -webkit-linéaire-gradient(0, RVB(255, 255, 255, .07) 50%, transparent 50%), -webkit-linéaire-gradient(0, RVB(255, 255, 255, .13) 50%, transparent 50%), -webkit-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .17) 50%), -webkit-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .19) 50%);
image de fond: -moz-linéaire-gradient(0, RVB(255, 255, 255, .07) 50%, transparent 50%), -moz-linéaire-gradient(0, RVB(255, 255, 255, .13) 50%, transparent 50%), -moz-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .17) 50%), -moz-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .19) 50%);
image de fond: -ms-linéaire-gradient(0, RVB(255, 255, 255, .07) 50%, transparent 50%), -ms-linéaire-gradient(0, RVB(255, 255, 255, .13) 50%, transparent 50%), -ms-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .17) 50%), -ms-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .19) 50%);
image de fond: -o-linéaire-gradient(0, RVB(255, 255, 255, .07) 50%, transparent 50%), -o-linéaire-gradient(0, RVB(255, 255, 255, .13) 50%, transparent 50%), -o-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .17) 50%), -o-linéaire-gradient(0, transparent 50%, RVB(255, 255, 255, .19) 50%);
image de fond: gradient linéaire(0, RVB(255, 255, 255, .07) 50%, transparent 50%), gradient linéaire(0, RVB(255, 255, 255, .13) 50%, transparent 50%), gradient linéaire(0, transparent 50%, RVB(255, 255, 255, .17) 50%), gradient linéaire(0, transparent 50%, RVB(255, 255, 255, .19) 50%);
}

5. La brique moderne

Vous pouvez créer un modèle de brique moderne en CSS pur à l'aide de l'outil gradient linéaire propriété CSS.

Code CSS

corps {
 image d'arrière-plan: dégradé linéaire (45 degrés, transparent 20 %, noir 25 %, transparent 25 %),
 dégradé linéaire (-45deg, transparent 20%, noir 25%, transparent 25%),
 dégradé linéaire (-45deg, transparent 75%, noir 80%, transparent 0),
 dégradé radial (gris 2px, transparent 0);
 taille d'arrière-plan: 30px 30px, 30px 30px ;
}

6. Arrière-plan de style Web3

Vous pouvez créer un Web3-arrière-plan de style utilisant une image d'arrière-plan et en y ajoutant un effet de flou. Cet exemple utilise une image de galaxie d'Unsplash. Vous pouvez être créatif et utiliser une image d'une galaxie, d'une mer, de monuments ou de toute autre chose.

Code HTML

<classe div="carte bg-flou">
<h1>Carte avec fond dégradé</h1>
</div>

Code CSS

:racine {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&automatique=formater&ajuster=recadrer&w=1169&q=80');
}
corps {
 Couleur de l'arrière plan: #1D1E22 ;
 famille de polices: sans empattement ;
 affichage: flexible ;
}
.carte {
 marge: automatique ;
 rembourrage: 1rem ;
 hauteur: 300px ;
 largeur: 300 pixels ;
 aligner le texte: centrer ;
 Couleur blanche;
 affichage: flexible ;
 align-items: center ;
 justifier-contenu: centrer ;
 position: relative ;
 couleur de fond: gris ;
 rayon de bordure: 10 px ;
}
.bg-flou {
 débordement caché;
 couleur de fond: transparente ;
}
.bg-flou::avant que {
 teneur: '';
 image de fond: var(--bg-image);
 taille de fond: couverture ;
 hauteur: 100 % ;
 largeur: 100 % ;
 position: absolue ;
 filtre: flou (30px) ;
 indice z: -1 ;
}

7. Animation de fond dégradé

Fond dégradé les animations sont largement utilisées dans les sites Web modernes. Restez dans la tendance et utilisez l'animation dégradée avec l'arrière-plan. Vous pouvez également personnaliser les couleurs du dégradé en fonction de vos besoins.

Code HTML

<classe div="d-flex flex-column justifier-content-center w-100 h-100"></div>

Code CSS

corps {
Contexte: gradient linéaire(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 taille d'arrière-plan: 400 % 400 % ;
 animation: gradient 15s facilité infinie ;
 hauteur: 100vh ;
}
@images clés pente {
 0% {
 position d'arrière-plan: 0 % 50 % ;
 }
50% {
 position d'arrière-plan: 100 % 50 % ;
 }
100% {
 position d'arrière-plan: 0 % 50 % ;
 }
}

8. Vagues sinueuses

Vous pouvez créer un simple motif de vagues courbes en utilisant le dégradé radial propriété CSS.

Code HTML

<classe div="modèles pt1"></div>

Code CSS

corps {
 marge: 0px ;
}
.motifs {
 largeur: 100vw ;
 hauteur: 100 vw ;
}
.pt1 {
Contexte: -moz-radial-gradient(0% 2%, cercle, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), -moz-radial-gradient(100% 100%, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), rien;
Contexte: -webkit-radial-gradient(0% 2%, cercle, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), -webkit-radial-gradient(100% 100%, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), rien;
Contexte: -ms-radial-gradient(0% 2%, cercle, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), -ms-radial-gradient(100% 100%, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), rien;
Contexte: -o-radial-gradient(0% 2%, cercle, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), -o-radial-gradient(100% 100%, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), rien;
Contexte: dégradé radial(0% 2%, cercle, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), dégradé radial(100% 100%, RVB(96, 16, 48, 0) 9pixels, #661133 10pixels, RVB(96, 16, 48, 0) 11pixels), rien;
 taille d'arrière-plan: 20px 20px ;
}

9. Nappe de table

Besoin d'un motif d'arrière-plan standard pour votre div HTML? Essayez ce modèle de nappe.

Code CSS

corps {
 fond: blanc ;
image de fond: gradient linéaire(90degré, RVB(200,0,0,.5) 50%, transparent 0),
gradient linéaire(RVB(200,0,0,.5) 50%, transparent 0);
 taille d'arrière-plan: 30px 30px ;
}

10. Diagonales coulissantes

Dans cet effet, les couleurs diagonales glissent et se chevauchent. L'animation fluide du mélange des couleurs peut ajouter une touche attrayante à votre site Web.

Code HTML

<classe div="bg"></div>
<classe div="bg bg2"></div>
<classe div="bg bg3"></div>
<classe div="teneur">
<h1>Effet de fond de diagonales coulissantes</h1>
</div>

Code CSS

html {
la taille:100%;
}
corps {
marge:0;
}
.bg {
animation:glisser 3sfacilité d'entréeinfinialterner;
image de fond: gradient linéaire(-60deg, #6c3 50%, #09f 50%);
bas:0;
la gauche:-50%;
opacité:.5;
position:fixé;
à droite:-50%;
Haut:0;
indice z:-1;
}
.bg2 {
animation-direction: alterné-inverse;
animation-durée:4s;
}
.bg3 {
animation-durée:5s;
}
.teneur {
Couleur de l'arrière plan:rgb (255,255,255,.8);
rayon de bordure:.25em;
boîte ombre:0 0 .25emRVB(0,0,0,.25);
dimensionnement de la boîte:border-box;
la gauche:50%;
rembourrage:10vmin;
position:fixé;
aligner le texte:centre;
Haut:50%;
transformer:translate(-50%, -50%);
}
h1 {
famille de polices:monospace;
}
@images clés glisser {
 0% {
transformer:translateX(-25%);
 }
100% {
transformer:translateX(25%);
 }
}

Améliorez votre site Web à l'aide de CSS

Utilisez ces motifs d'arrière-plan CSS pour embellir la conception de votre site Web. Vous pouvez également augmenter votre productivité CSS en utilisant quelques trucs et astuces CSS sympas. Ils peuvent vous aider à créer des conceptions élégantes en CSS avec seulement quelques lignes de code.

8 trucs et astuces CSS essentiels que tout développeur devrait connaître

Lire la suite

A propos de l'auteur