10 CSS-baggrundsmønstre, du kan bruge på dit websted

Baggrundsmønstre kan radikalt ændre udseendet af din hjemmeside. Du kan nemt skabe elegante baggrundsmønstre ved hjælp af CSS, der vil tage dit websteds design til det næste niveau.

Nedenfor er en liste over 10 baggrundsmønstre, som du kan bruge i dine projekter.

1. Den sorte sekskant

Koden i disse eksempler er tilgængelig i en GitHub-depot og er gratis for dig at bruge under MIT licens.

Dette sorte sekskantede mønster giver en meget pæn sekskantet netværksbaggrund. Titlen er tydeligt synlig på denne baggrund. Du kan bruge dette mønster, hvis du designer teknologiske eller arkitektoniske websteder.

HTML kode

<h1>Den sorte sekskant</h1>

CSS kode

krop {
 skrifttype-familie: 'Del Tech', sans serif;
 skriftstørrelse: 68px;
 farve: hvid;
 display: flex;
 juster-indhold: center;
 align-items: center;
 margin: 0;
 bredde: 100vw;
 højde: 100vh;
 tekst-skygge: 8px 8px 10px #0000008c;
 baggrundsfarve: #343a40;
 baggrundsbillede: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' bredde ='28' højde='





instagram viewer
49' viewBox='0 0 28 49'%3E%3Cg udfyldningsregel='evenodd'%3E%3Cg id='sekskanter' fyld='%239C92AC' fyld-opacitet='0.25' fyld-regel='ikke nul'%3E%3Cpath 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,1739M 06,1739M 0,1739M 0,1739M 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V0h 1.29m 7.29m 7.29m 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineær gradient (til højre øverst, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margen: 20px;
}

2. De blå strimler

Det blå strimler baggrundsmønster bruger lineær gradient CSS-egenskab til at skabe gradientstrimler over en baggrund. Du kan ændre baggrundsfarven og gradientfarven for at opfylde dine krav.

HTML kode

<div klasse="mønstre pt1"></div>

CSS kode

krop {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 højde: 100vw;
}
.pt1 {
 baggrundsstørrelse: 50px 50px;
 baggrundsfarve: #0ae;
baggrundsbillede: -webkit-lineær-gradient(rgba(255, 255, 255, .2) 50%, gennemsigtig 50%, gennemsigtig);
baggrundsbillede: -moz-lineær-gradient(rgba(255, 255, 255, .2) 50%, gennemsigtig 50%, gennemsigtig);
baggrundsbillede: -ms-lineær-gradient(rgba(255, 255, 255, .2) 50%, gennemsigtig 50%, gennemsigtig);
baggrundsbillede: -o-lineær-gradient(rgba(255, 255, 255, .2) 50%, gennemsigtig 50%, gennemsigtig);
baggrundsbillede: lineær gradient(rgba(255, 255, 255, .2) 50%, gennemsigtig 50%, gennemsigtig);
}

3. Skakbrættet

Du kan nemt oprette et skakbrætbaggrundsdesignmønster ved hjælp af CSS. Prøv at justere farverne for at variere dette design.

HTML kode

<div klasse="mønstre pt1"></div>

CSS kode

krop {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 højde: 100vw;
}
.pt1 {
 baggrundsfarve: #eee;
 baggrundsstørrelse: 60px 60px;
 baggrundsposition: 0 0, 30px 30px;
 baggrundsbillede: -webkit-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort), -webkit-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort);
 baggrundsbillede: -moz-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort), -moz-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort);
 baggrundsbillede: -ms-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort), -ms-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort);
 baggrundsbillede: -o-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort), -o-lineær-gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75%, sort 75%, sort);
 baggrundsbillede: lineær gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort), lineær gradient (45 grader, sort 25 %, gennemsigtig 25 %, gennemsigtig 75 %, sort 75 %, sort);
}

4. Det stille hav

Du kan bruge disse enkle vandrette linjemønstre til at tilføje en statisk baggrund til ethvert HTML-element.

HTML kode

<div klasse="mønstre pt1"></div>

CSS kode

krop {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 højde: 100vw;
}
.pt1 {
 baggrundsfarve: #026873;
 baggrundsstørrelse: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
baggrundsbillede: -webkit-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gennemsigtig 50%), -webkit-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gennemsigtig 50%), -webkit-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .19) 50%);
baggrundsbillede: -moz-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gennemsigtig 50%), -moz-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gennemsigtig 50%), -moz-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .17) 50%), -moz-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .19) 50%);
baggrundsbillede: -ms-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gennemsigtig 50%), -ms-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gennemsigtig 50%), -ms-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .17) 50%), -ms-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .19) 50%);
baggrundsbillede: -o-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gennemsigtig 50%), -o-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gennemsigtig 50%), -o-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .17) 50%), -o-lineær-gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .19) 50%);
baggrundsbillede: lineær gradient(0, rgba(255, 255, 255, .07) 50%, gennemsigtig 50%), lineær gradient(0, rgba(255, 255, 255, .13) 50%, gennemsigtig 50%), lineær gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .17) 50%), lineær gradient(0, gennemsigtig 50%, rgba(255, 255, 255, .19) 50%);
}

5. Den moderne mursten

Du kan oprette et rent CSS moderne klodsmønster ved hjælp af lineær gradient CSS ejendom.

CSS kode

krop {
 baggrundsbillede: lineær gradient (45 grader, gennemsigtig 20 %, sort 25 %, gennemsigtig 25 %),
 lineær gradient (-45 grader, gennemsigtig 20 %, sort 25 %, gennemsigtig 25 %),
 lineær gradient (-45 grader, gennemsigtig 75 %, sort 80 %, gennemsigtig 0),
 radial-gradient (grå 2px, transparent 0);
 baggrundsstørrelse: 30px 30px, 30px 30px;
}

6. Web3 stil baggrund

Du kan oprette en Web3-stil baggrund ved at bruge et baggrundsbillede og tilføje en sløringseffekt til det. Dette eksempel bruger et galaksebillede fra Unsplash. Du kan være kreativ og bruge et billede af en galakse, hav, monumenter eller noget andet.

HTML kode

<div klasse="kort bg-blur">
<h1>Kort med gradient baggrund</h1>
</div>

CSS kode

:rod {
 --bg-billede: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&pasform=afgrøde&w=1169&q=80');
}
krop {
 baggrundsfarve: #1D1E22;
 font-familie: sans-serif;
 display: flex;
}
.kort {
 margin: auto;
 polstring: 1rem;
 højde: 300px;
 bredde: 300px;
 tekst-align: center;
 farve: hvid;
 display: flex;
 align-items: center;
 retfærdiggøre-indhold: center;
 stilling: relativ;
 baggrundsfarve: grå;
 kant-radius: 10px;
}
.bg-blur {
 overløb: skjult;
 baggrundsfarve: gennemsigtig;
}
.bg-blur::Før {
 indhold: '';
 baggrundsbillede: var(--bg-billede);
 baggrundsstørrelse: omslag;
 højde: 100%;
 bredde: 100%;
 position: absolut;
 filter: sløring (30px);
 z-indeks: -1;
}

7. Gradient baggrundsanimation

Gradient baggrund animationer er meget udbredt på moderne hjemmesider. Hold dig opdateret, og brug gradientanimationen med baggrunden. Du kan også tilpasse gradientfarverne efter dine behov.

HTML kode

<div klasse="d-flex flex-column justify-content-center w-100 h-100"></div>

CSS kode

krop {
baggrund: lineær gradient(-45 grader, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 baggrundsstørrelse: 400% 400%;
 animation: gradient 15s lethed uendelig;
 højde: 100vh;
}
@keyframes gradient {
 0% {
 baggrundsposition: 0% 50%;
 }
50% {
 baggrundsposition: 100% 50%;
 }
100% {
 baggrundsposition: 0% 50%;
 }
}

8. Kurvede bølger

Du kan skabe et simpelt kurvet bølgemønster ved hjælp af radial-gradient CSS ejendom.

HTML kode

<div klasse="mønstre pt1"></div>

CSS kode

krop {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 højde: 100vw;
}
.pt1 {
baggrund: -moz-radial-gradient(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
baggrund: -webkit-radial-gradient(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
baggrund: -ms-radial-gradient(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
baggrund: -o-radial-gradient(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
baggrund: radial-gradient(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radial-gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
 baggrundsstørrelse: 20px 20px;
}

9. Borddug

Har du brug for et standard baggrundsmønster til din HTML div? Prøv dette dugemønster.

CSS kode

krop {
 baggrund: hvid;
baggrundsbillede: lineær gradient(90deg, rgba(200,0,0,.5) 50%, gennemsigtig 0),
lineær gradient(rgba(200,0,0,.5) 50%, gennemsigtig 0);
 baggrundsstørrelse: 30px 30px;
}

10. glidende diagonaler

I denne effekt glider de diagonale farver og overlapper hinanden. Den glatte animation af blanding af farver kan tilføje et attraktivt touch til din hjemmeside.

HTML kode

<div klasse="bg"></div>
<div klasse="bg bg2"></div>
<div klasse="bg bg3"></div>
<div klasse="indhold">
<h1>Glidende diagonaler Baggrundseffekt</h1>
</div>

CSS kode

html {
højde:100%;
}
krop {
margen:0;
}
.bg {
animation:glide 3slet ind-uduendeligskifte;
baggrundsbillede: lineær gradient(-60 grader, #6c3 50%, #09f 50%);
bund:0;
venstre:-50%;
Gennemsigtighed:.5;
position: fikset;
ret:-50%;
top:0;
z-indeks:-1;
}
.bg2 {
animation-retning: skiftevis-omvendt;
animation-varighed:4s;
}
.bg3 {
animation-varighed:5s;
}
.indhold {
baggrundsfarve:rgba (255,255,255,.8);
grænse-radius:.25em;
kasse-skygge:0 0 .25emrgba(0,0,0,.25);
kassestørrelse:border-box;
venstre:50%;
polstring:10vmin;
position: fikset;
tekstjustering:centrum;
top:50%;
transformere:translate(-50%, -50%);
}
h1 {
skrifttype-familie:monospace;
}
@keyframes slide {
 0% {
transformere:translateX(-25%);
 }
100% {
transformere:translateX(25%);
 }
}

Pift dit websted op ved hjælp af CSS

Brug disse CSS-baggrundsmønstre til at pifte designet af din hjemmeside op. Du kan også øge din CSS-produktivitet ved at bruge nogle fede CSS-tip og tricks. De kan hjælpe dig med at skabe smarte designs i CSS med blot et par linjer kode.

8 essentielle CSS-tip og tricks, som enhver udvikler bør kende

Læs Næste

Om forfatteren