10 CSS-bakgrundsmönster du kan använda på din webbplats

Bakgrundsmönster kan radikalt förändra utseendet på din webbplats. Du kan enkelt skapa eleganta bakgrundsmönster med hjälp av CSS som tar din webbplats design till nästa nivå.

Nedan är en lista med 10 bakgrundsmönster som du kan använda i dina projekt.

1. Den svarta hexagonen

Koden i dessa exempel är tillgänglig i en GitHub-förråd och är gratis för dig att använda under MIT-licens.

Detta svarta hexagonmönster ger en mycket snygg hexagonnätverksbakgrund. Titeln syns tydligt mot denna bakgrund. Du kan använda det här mönstret om du designar några tekniska eller arkitektoniska webbplatser.

HTML-kod

<h1>Den svarta hexagonen</h1>

CSS-kod

kropp {
 typsnittsfamilj: 'Dela Tech', sans serif;
 teckenstorlek: 68px;
 färg vit;
 display: flex;
 justify-content: center;
 align-items: center;
 marginal: 0;
 bredd: 100vw;
 höjd: 100vh;
 text-skugga: 8px 8px 10px #0000008c;
 bakgrundsfärg: #343a40;
 bakgrundsbild: url("data: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' bredd='28' höjd='49' viewBox='0 0 28 49'%3E%3Cg fyllningsregel=





instagram viewer

'evenodd'%3E%3Cg id='hexagoner' fyll='%239C92AC' fyll-opacitet='0.25' fyll-regel='icke noll'%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.1849M 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 7.29m 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), linjär-gradient (till höger överst, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 marginal: 20px;
}

2. The Blue Strips

Bakgrundsmönstret med blå remsor använder linjär-gradient CSS-egenskap för att skapa gradientremsor över en bakgrund. Du kan ändra bakgrundsfärgen och gradientfärgen för att uppfylla dina krav.

HTML-kod

<div klass="mönster pt1"></div>

CSS-kod

kropp {
 marginal: 0px;
}
.mönster {
 bredd: 100vw;
 höjd: 100vw;
}
.pt1 {
 bakgrundsstorlek: 50px 50px;
 bakgrundsfärg: #0ae;
bakgrundsbild: -webkit-linjär-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
bakgrundsbild: -moz-linjär-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
bakgrundsbild: -ms-linjär-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
bakgrundsbild: -o-linjär-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
bakgrundsbild: linjär-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent);
}

3. Schackbrädet

Du kan enkelt skapa ett schackbrädesbakgrundsdesignmönster med hjälp av CSS. Försök att justera färgerna för att variera denna design.

HTML-kod

<div klass="mönster pt1"></div>

CSS-kod

kropp {
 marginal: 0px;
}
.mönster {
 bredd: 100vw;
 höjd: 100vw;
}
.pt1 {
 bakgrundsfärg: #eee;
 bakgrundsstorlek: 60px 60px;
 bakgrundsposition: 0 0, 30px 30px;
 bakgrundsbild: -webkit-linear-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart), -webkit-linear-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart);
 bakgrundsbild: -moz-linear-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart), -moz-linjär-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart);
 bakgrundsbild: -ms-linear-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart), -ms-linear-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart);
 bakgrundsbild: -o-linjär-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart), -o-linjär-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart);
 bakgrundsbild: linjär-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart), linjär-gradient (45 grader, svart 25 %, transparent 25 %, transparent 75 %, svart 75 %, svart);
}

4. Det tysta havet

Du kan använda dessa enkla horisontella linjemönster för att lägga till en statisk bakgrund till alla HTML-element.

HTML-kod

<div klass="mönster pt1"></div>

CSS-kod

kropp {
 marginal: 0px;
}
.mönster {
 bredd: 100vw;
 höjd: 100vw;
}
.pt1 {
 bakgrundsfärg: #026873;
 bakgrundsstorlek: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
bakgrundsbild: -webkit-linjär-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -webkit-linjär-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -webkit-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -webkit-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
bakgrundsbild: -moz-linjär-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -moz-linjär-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -moz-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -moz-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
bakgrundsbild: -ms-linjär-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -ms-linjär-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -ms-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -ms-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
bakgrundsbild: -o-linjär-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), -o-linjär-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), -o-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), -o-linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
bakgrundsbild: linjär-gradient(0, rgba(255, 255, 255, .07) 50%, transparent 50%), linjär-gradient(0, rgba(255, 255, 255, .13) 50%, transparent 50%), linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .17) 50%), linjär-gradient(0, transparent 50%, rgba(255, 255, 255, .19) 50%);
}

5. Den moderna tegelstenen

Du kan skapa ett rent CSS-modernt tegelmönster med hjälp av linjär-gradient CSS-egenskap.

CSS-kod

kropp {
 bakgrundsbild: linjär gradient (45 grader, transparent 20 %, svart 25 %, transparent 25 %),
 linjär gradient (-45 grader, transparent 20 %, svart 25 %, transparent 25 %),
 linjär gradient (-45 grader, transparent 75 %, svart 80 %, transparent 0),
 radiell gradient (grå 2px, transparent 0);
 bakgrundsstorlek: 30px 30px, 30px 30px;
}

6. Web3 stilbakgrund

Du kan skapa en Web3-stil bakgrund med hjälp av en bakgrundsbild och lägga till en oskärpa effekt till den. Det här exemplet använder en galaxbild från Unsplash. Du kan vara kreativ och använda en bild av en galax, hav, monument eller något annat.

HTML-kod

<div klass="kort bg-oskärpa">
<h1>Kort med gradientbakgrund</h1>
</div>

CSS-kod

:rot {
 --bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&passform=skörd&w=1169&q=80');
}
kropp {
 bakgrundsfärg: #1D1E22;
 teckensnittsfamilj: sans-serif;
 display: flex;
}
.kort {
 marginal: auto;
 stoppning: 1rem;
 höjd: 300px;
 bredd: 300px;
 text-align: center;
 färg vit;
 display: flex;
 align-items: center;
 motivera-innehåll: center;
 position: relativ;
 bakgrundsfärg: grå;
 kantradie: 10px;
}
.bg-blur {
 overflow: gömd;
 bakgrundsfärg: transparent;
}
.bg-blur::innan {
 innehåll: '';
 bakgrundsbild: var(--bg-bild);
 bakgrundsstorlek: omslag;
 höjd: 100%;
 bredd: 100%;
 position: absolut;
 filter: oskärpa (30px);
 z-index: -1;
}

7. Gradient bakgrundsanimering

Gradient bakgrund animationer används ofta på moderna webbplatser. Håll dig uppdaterad och använd gradientanimationen med bakgrunden. Du kan också anpassa gradientfärgerna efter dina behov.

HTML-kod

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

CSS-kod

kropp {
bakgrund: linjär-gradient(-45 grader, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 bakgrundsstorlek: 400 % 400 %;
 animation: gradient 15s lätthet oändlig;
 höjd: 100vh;
}
@nyckelrutor gradient {
 0% {
 bakgrundsposition: 0% 50%;
 }
50% {
 bakgrundsposition: 100% 50%;
 }
100% {
 bakgrundsposition: 0% 50%;
 }
}

8. Kurviga vågor

Du kan skapa ett enkelt kurvigt vågmönster med hjälp av radiell gradient CSS-egenskap.

HTML-kod

<div klass="mönster pt1"></div>

CSS-kod

kropp {
 marginal: 0px;
}
.mönster {
 bredd: 100vw;
 höjd: 100vw;
}
.pt1 {
bakgrund: -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;
bakgrund: -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;
bakgrund: -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;
bakgrund: -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;
bakgrund: radiell gradient(0% 2%, cirkel, 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;
 bakgrundsstorlek: 20px 20px;
}

9. Bordsduk

Behöver du ett standardbakgrundsmönster för din HTML div? Prova detta bordsduksmönster.

CSS-kod

kropp {
 bakgrund: vit;
bakgrundsbild: linjär-gradient(90deg, rgba(200,0,0,.5) 50%, transparent 0),
linjär-gradient(rgba(200,0,0,.5) 50%, transparent 0);
 bakgrundsstorlek: 30px 30px;
}

10. Glidande diagonaler

I denna effekt glider de diagonala färgerna och överlappar varandra. Den smidiga animeringen av att blanda färger kan ge din webbplats en attraktiv touch.

HTML-kod

<div klass="bg"></div>
<div klass="bg bg2"></div>
<div klass="bg bg3"></div>
<div klass="innehåll">
<h1>Glidande diagonaler Bakgrundseffekt</h1>
</div>

CSS-kod

html {
höjd:100%;
}
kropp {
marginal:0;
}
.bg {
animering:glida 3slätt-in-utoändligalternativ;
bakgrundsbild: linjär-gradient(-60 grader, #6c3 50%, #09f 50%);
botten:0;
vänster:-50%;
opacitet:.5;
placera:fast;
rätt:-50%;
topp:0;
z-index:-1;
}
.bg2 {
animation-riktning:växel-omvänd;
animation-varaktighet:4s;
}
.bg3 {
animation-varaktighet:5s;
}
.innehåll {
bakgrundsfärg:rgba (255,255,255,.8);
gränsradie:.25em;
box-skugga:0 0 .25emrgba(0,0,0,.25);
kartongstorlek:border-box;
vänster:50%;
stoppning:10vmin;
placera:fast;
textjustera:Centrum;
topp:50%;
omvandla:translate(-50%, -50%);
}
h1 {
typsnittsfamilj:monospace;
}
@nyckelrutor glida {
 0% {
omvandla:translateX(-25%);
 }
100% {
omvandla:translateX(25%);
 }
}

Piffa upp din webbplats med CSS

Använd dessa CSS-bakgrundsmönster för att piffa upp designen på din webbplats. Du kan också öka din CSS-produktivitet med några coola CSS-tips och tricks. De kan hjälpa dig att skapa snygg design i CSS med bara några rader kod.

8 viktiga CSS-tips och tricks som alla utvecklare bör känna till

Läs Nästa

Om författaren