10 CSS-bakgrunnsmønstre du kan bruke på nettstedet ditt

Bakgrunnsmønstre kan radikalt endre utseendet til nettstedet ditt. Du kan enkelt lage elegante bakgrunnsmønstre ved hjelp av CSS som tar nettstedets design til neste nivå.

Nedenfor er en liste over 10 bakgrunnsmønstre som du kan bruke i prosjektene dine.

1. Den svarte sekskanten

Koden i disse eksemplene er tilgjengelig i en GitHub-depot og er gratis for deg å bruke under MIT-lisens.

Dette svarte sekskantmønsteret gir en veldig pen sekskantnettverksbakgrunn. Tittelen er godt synlig på denne bakgrunnen. Du kan bruke dette mønsteret hvis du designer teknologiske eller arkitektoniske nettsteder.

HTML-kode

<h1>Den svarte sekskanten</h1>

CSS-kode

kropp {
 font-familie: 'Del Tech', sans serif;
 skriftstørrelse: 68px;
 farge: hvit;
 display: flex;
 justify-content: senter;
 align-items: center;
 margin: 0;
 bredde: 100vw;
 høyde: 100vh;
 tekst-skygge: 8px 8px 10px #0000008c;
 bakgrunnsfarge: #343a40;
 bakgrunnsbilde: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' bredde='28' høyde='49' viewBox=





instagram viewer

'0 0 28 49'%3E%3Cg fyll-regel='evenodd'%3E%3Cg id='sekskanter' fyll='%239C92AC' fyll-opasitet='0.25' fyll-regel='ikke null'%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 0.175.2h 12.69v2.3zm0 18.5L12.98 41v8h-2v-6.85L0 35.81v-2.3zM15 0v7.5L27.99 15H28v-2.31h-.01L17 6.35V00h 7.29h 7.29m 7.29h 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineær gradient (til høyre topp, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margin: 20px;
}

2. The Blue Strips

Bakgrunnsmønsteret med blå striper bruker lineær gradient CSS-egenskap for å lage gradientstrimler over en bakgrunn. Du kan endre bakgrunnsfargen og gradientfargen for å møte dine krav.

HTML-kode

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

CSS-kode

kropp {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 høyde: 100vw;
}
.pt1 {
 bakgrunnsstørrelse: 50px 50px;
 bakgrunnsfarge: #0ae;
bakgrunnsbilde: -webkit-lineær-gradient(rgba(255, 255, 255, .2) 50%, gjennomsiktig 50%, gjennomsiktig);
bakgrunnsbilde: -moz-lineær-gradient(rgba(255, 255, 255, .2) 50%, gjennomsiktig 50%, gjennomsiktig);
bakgrunnsbilde: -ms-lineær-gradient(rgba(255, 255, 255, .2) 50%, gjennomsiktig 50%, gjennomsiktig);
bakgrunnsbilde: -o-lineær-gradient(rgba(255, 255, 255, .2) 50%, gjennomsiktig 50%, gjennomsiktig);
bakgrunnsbilde: lineær gradient(rgba(255, 255, 255, .2) 50%, gjennomsiktig 50%, gjennomsiktig);
}

3. Sjakkstyret

Du kan enkelt lage et sjakkbrettbakgrunnsdesignmønster ved å bruke CSS. Prøv å justere fargene for å variere dette designet.

HTML-kode

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

CSS-kode

kropp {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 høyde: 100vw;
}
.pt1 {
 bakgrunnsfarge: #eee;
 bakgrunnsstørrelse: 60px 60px;
 bakgrunnsposisjon: 0 0, 30px 30px;
 bakgrunnsbilde: -webkit-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart), -webkit-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart);
 bakgrunnsbilde: -moz-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart), -moz-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart);
 bakgrunnsbilde: -ms-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart), -ms-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart);
 bakgrunnsbilde: -o-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart), -o-lineær-gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart);
 bakgrunnsbilde: lineær gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart), lineær gradient (45 grader, svart 25 %, gjennomsiktig 25 %, gjennomsiktig 75 %, svart 75 %, svart);
}

4. Det stille hav

Du kan bruke disse enkle horisontale linjemønstrene for å legge til en statisk bakgrunn til ethvert HTML-element.

HTML-kode

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

CSS-kode

kropp {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 høyde: 100vw;
}
.pt1 {
 bakgrunnsfarge: #026873;
 bakgrunnsstørrelse: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
bakgrunnsbilde: -webkit-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gjennomsiktig 50%), -webkit-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gjennomsiktig 50%), -webkit-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .19) 50%);
bakgrunnsbilde: -moz-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gjennomsiktig 50%), -moz-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gjennomsiktig 50%), -moz-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .17) 50%), -moz-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .19) 50%);
bakgrunnsbilde: -ms-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gjennomsiktig 50%), -ms-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gjennomsiktig 50%), -ms-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .17) 50%), -ms-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .19) 50%);
bakgrunnsbilde: -o-lineær-gradient(0, rgba(255, 255, 255, .07) 50%, gjennomsiktig 50%), -o-lineær-gradient(0, rgba(255, 255, 255, .13) 50%, gjennomsiktig 50%), -o-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .17) 50%), -o-lineær-gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .19) 50%);
bakgrunnsbilde: lineær gradient(0, rgba(255, 255, 255, .07) 50%, gjennomsiktig 50%), lineær gradient(0, rgba(255, 255, 255, .13) 50%, gjennomsiktig 50%), lineær gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .17) 50%), lineær gradient(0, gjennomsiktig 50%, rgba(255, 255, 255, .19) 50%);
}

5. Den moderne mursteinen

Du kan lage et rent CSS moderne mursteinsmønster ved å bruke lineær gradient CSS-eiendom.

CSS-kode

kropp {
 bakgrunnsbilde: lineær gradient (45 grader, gjennomsiktig 20 %, svart 25 %, gjennomsiktig 25 %),
 lineær gradient (-45 grader, gjennomsiktig 20 %, svart 25 %, gjennomsiktig 25 %),
 lineær gradient (-45 grader, gjennomsiktig 75 %, svart 80 %, gjennomsiktig 0),
 radiell gradient (grå 2px, gjennomsiktig 0);
 bakgrunnsstørrelse: 30px 30px, 30px 30px;
}

6. Web3-stilbakgrunn

Du kan lage en Web3-stil bakgrunn ved å bruke et bakgrunnsbilde og legge til en uskarphet effekt til det. Dette eksemplet bruker et galaksebilde fra Unsplash. Du kan være kreativ og bruke et bilde av en galakse, hav, monumenter eller noe annet.

HTML-kode

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

CSS-kode

:rot {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&passe=beskjære&w=1169&q=80');
}
kropp {
 bakgrunnsfarge: #1D1E22;
 font-familie: sans-serif;
 display: flex;
}
.kort {
 margin: auto;
 polstring: 1rem;
 høyde: 300px;
 bredde: 300px;
 tekst-align: center;
 farge: hvit;
 display: flex;
 align-items: center;
 rettferdiggjøre-innhold: senter;
 stilling: pårørende;
 bakgrunnsfarge: grå;
 border-radius: 10px;
}
.bg-blur {
 overløp: skjult;
 bakgrunnsfarge: gjennomsiktig;
}
.bg-blur::før {
 innhold: '';
 bakgrunnsbilde: var(--bg-bilde);
 bakgrunnsstørrelse: cover;
 høyde: 100 %;
 bredde: 100 %;
 posisjon: absolutt;
 filter: uskarphet (30px);
 z-indeks: -1;
}

7. Gradient bakgrunnsanimasjon

Gradient bakgrunn animasjoner er mye brukt på moderne nettsteder. Hold deg oppdatert og bruk gradientanimasjonen med bakgrunnen. Du kan også tilpasse gradientfargene etter dine behov.

HTML-kode

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

CSS-kode

kropp {
bakgrunn: lineær gradient(-45 grader, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 bakgrunnsstørrelse: 400 % 400 %;
 animasjon: gradient 15s letthet uendelig;
 høyde: 100vh;
}
@keyframes gradient {
 0% {
 bakgrunnsposisjon: 0% 50%;
 }
50% {
 bakgrunnsposisjon: 100 % 50 %;
 }
100% {
 bakgrunnsposisjon: 0% 50%;
 }
}

8. Kurvede bølger

Du kan lage et enkelt buet bølgemønster ved å bruke radiell gradient CSS-eiendom.

HTML-kode

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

CSS-kode

kropp {
 margin: 0px;
}
.mønstre {
 bredde: 100vw;
 høyde: 100vw;
}
.pt1 {
bakgrunn: -moz-radial-gradient(0% 2%, sirkel, 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;
bakgrunn: -webkit-radial-gradient(0% 2%, sirkel, 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;
bakgrunn: -ms-radial-gradient(0% 2%, sirkel, 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;
bakgrunn: -o-radial-gradient(0% 2%, sirkel, 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;
bakgrunn: radiell gradient(0% 2%, sirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiell gradient(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), ingen;
 bakgrunnsstørrelse: 20px 20px;
}

9. Bordduk

Trenger du et standard bakgrunnsmønster for HTML div? Prøv dette dukmønsteret.

CSS-kode

kropp {
 bakgrunn: hvit;
bakgrunnsbilde: lineær gradient(90grader, rgba(200,0,0,.5) 50%, gjennomsiktig 0),
lineær gradient(rgba(200,0,0,.5) 50%, gjennomsiktig 0);
 bakgrunnsstørrelse: 30px 30px;
}

10. Glidende diagonaler

I denne effekten glir de diagonale fargene og overlapper hverandre. Den jevne animasjonen av å blande farger kan legge til et attraktivt preg på nettstedet ditt.

HTML-kode

<div klasse="bg"></div>
<div klasse="bg bg2"></div>
<div klasse="bg bg3"></div>
<div klasse="innhold">
<h1>Glidende diagonaler Bakgrunnseffekt</h1>
</div>

CSS-kode

html {
høyde:100%;
}
kropp {
margin:0;
}
.bg {
animasjon:lysbilde 3slette inn-utuendeligalternere;
bakgrunnsbilde: lineær gradient(-60 grader, #6c3 50%, #09f 50%);
bunn:0;
venstre:-50%;
opasitet:.5;
posisjon:fikset;
Ikke sant:-50%;
topp:0;
z-indeks:-1;
}
.bg2 {
animasjonsretning:alternativ-revers;
animasjon-varighet:4s;
}
.bg3 {
animasjon-varighet:5s;
}
.innhold {
bakgrunnsfarge:rgba (255,255,255,.8);
grense-radius:.25em;
boks-skygge:0 0 .25emrgba(0,0,0,.25);
boksstørrelse:border-box;
venstre:50%;
polstring:10vmin;
posisjon:fikset;
tekstjustering:senter;
topp:50%;
forvandle:translate(-50%, -50%);
}
h1 {
font-familie:monospace;
}
@keyframes lysbilde {
 0% {
forvandle:translateX(-25%);
 }
100% {
forvandle:translateX(25%);
 }
}

Piff opp nettstedet ditt ved å bruke CSS

Bruk disse CSS-bakgrunnsmønstrene for å piffe opp designet på nettstedet ditt. Du kan også øke CSS-produktiviteten ved å bruke noen kule CSS-tips og triks. De kan hjelpe deg med å lage smarte design i CSS med bare noen få linjer med kode.

8 essensielle CSS-tips og triks alle utviklere bør vite

Les Neste

Om forfatteren