10 CSS-achtergrondpatronen die u op uw website kunt gebruiken

Achtergrondpatronen kunnen het uiterlijk van uw website radicaal veranderen. U kunt eenvoudig elegante achtergrondpatronen maken met CSS die het ontwerp van uw site naar een hoger niveau tillen.

Hieronder vindt u een lijst met 10 achtergrondpatronen die u in uw projecten kunt gebruiken.

1. De zwarte zeshoek

De code in deze voorbeelden is beschikbaar in een GitHub-opslagplaats en is gratis voor u om te gebruiken onder de MIT-licentie.

Dit zwarte zeshoekige patroon zorgt voor een zeer nette zeshoekige netwerkachtergrond. Tegen deze achtergrond is de titel duidelijk zichtbaar. U kunt dit patroon gebruiken als u technologische of architecturale websites ontwerpt.

HTML code

<h1>De zwarte zeshoek</h1>

CSS-code

lichaam {
 font-familie: 'Deel technologie', schreefloos;
 lettergrootte: 68px;
 kleur wit;
 weergave: flexibel;
 justify-content: centrum;
 align-items: midden;
 marge: 0;
 breedte: 100vw;
 hoogte: 100vh;
 schaduw tekst: 8px 8px 10px #0000008c;
 Achtergrond kleur: #343a40;
 achtergrondafbeelding: url("gegevens: afbeelding/svg+xml,%3Csvg xmlns=





instagram viewer

'http://www.w3.org/2000/svg' breedte='28' hoogte='49' viewBox='0 0 28 49'%3E%3Cg vulregel='even oneven'%3E%3Cg id='zeshoeken' vullen='%239C92AC' fill-opacity='0.25' fill-rule='niet-nul'%3E%3Cpad 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.35L0 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.31h-.01L17 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), lineair verloop (naar rechtsboven, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 marge: 20px;
}

2. De blauwe stroken

Het achtergrondpatroon met blauwe stroken gebruikt de lineair-gradiënt CSS-eigenschap om verloopstroken over een achtergrond te maken. Jij kan verander de achtergrondkleur en de gradiëntkleur om aan uw vereisten te voldoen.

HTML code

<div klasse="patronen pt1"></div>

CSS-code

lichaam {
 marge: 0px;
}
.patronen {
 breedte: 100vw;
 hoogte: 100vw;
}
.pt1 {
 achtergrondgrootte: 50px 50px;
 Achtergrond kleur: #0ae;
achtergrond afbeelding: -webkit-lineaire-gradiënt(rgba(255, 255, 255, .2) 50%, transparant 50%, transparant);
achtergrond afbeelding: -moz-lineaire-gradiënt(rgba(255, 255, 255, .2) 50%, transparant 50%, transparant);
achtergrond afbeelding: -ms-lineaire-gradiënt(rgba(255, 255, 255, .2) 50%, transparant 50%, transparant);
achtergrond afbeelding: -o-lineaire-gradiënt(rgba(255, 255, 255, .2) 50%, transparant 50%, transparant);
achtergrond afbeelding: lineair-gradiënt(rgba(255, 255, 255, .2) 50%, transparant 50%, transparant);
}

3. Het schaakbord

U kunt eenvoudig een ontwerppatroon voor een schaakbord maken met behulp van CSS. Probeer de kleuren aan te passen om dit ontwerp te variëren.

HTML code

<div klasse="patronen pt1"></div>

CSS-code

lichaam {
 marge: 0px;
}
.patronen {
 breedte: 100vw;
 hoogte: 100vw;
}
.pt1 {
 Achtergrond kleur: #eee;
 achtergrondgrootte: 60px 60px;
 achtergrondpositie: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart), -webkit-lineair-gradiënt (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart);
 achtergrondafbeelding: -moz-linear-gradient (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart), -moz-lineair verloop (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart);
 achtergrondafbeelding: -ms-linear-gradient (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart), -ms-lineair-gradiënt (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart);
 achtergrondafbeelding: -o-lineair-gradiënt (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart), -o-lineair-gradiënt (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart);
 achtergrondafbeelding: lineair verloop (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart), lineair verloop (45deg, zwart 25%, transparant 25%, transparant 75%, zwart 75%, zwart);
}

4. De stille zee

U kunt deze eenvoudige horizontale lijnpatronen gebruiken om een ​​statische achtergrond aan elk HTML-element toe te voegen.

HTML code

<div klasse="patronen pt1"></div>

CSS-code

lichaam {
 marge: 0px;
}
.patronen {
 breedte: 100vw;
 hoogte: 100vw;
}
.pt1 {
 Achtergrond kleur: #026873;
 achtergrondgrootte: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
achtergrond afbeelding: -webkit-lineaire-gradiënt(0, rgba(255, 255, 255, .07) 50%, transparant 50%), -webkit-lineaire-gradiënt(0, rgba(255, 255, 255, .13) 50%, transparant 50%), -webkit-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .17) 50%), -webkit-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .19) 50%);
achtergrond afbeelding: -moz-lineaire-gradiënt(0, rgba(255, 255, 255, .07) 50%, transparant 50%), -moz-lineaire-gradiënt(0, rgba(255, 255, 255, .13) 50%, transparant 50%), -moz-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .17) 50%), -moz-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .19) 50%);
achtergrond afbeelding: -ms-lineaire-gradiënt(0, rgba(255, 255, 255, .07) 50%, transparant 50%), -ms-lineaire-gradiënt(0, rgba(255, 255, 255, .13) 50%, transparant 50%), -ms-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .17) 50%), -ms-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .19) 50%);
achtergrond afbeelding: -o-lineaire-gradiënt(0, rgba(255, 255, 255, .07) 50%, transparant 50%), -o-lineaire-gradiënt(0, rgba(255, 255, 255, .13) 50%, transparant 50%), -o-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .17) 50%), -o-lineaire-gradiënt(0, transparant 50%, rgba(255, 255, 255, .19) 50%);
achtergrond afbeelding: lineair-gradiënt(0, rgba(255, 255, 255, .07) 50%, transparant 50%), lineair-gradiënt(0, rgba(255, 255, 255, .13) 50%, transparant 50%), lineair-gradiënt(0, transparant 50%, rgba(255, 255, 255, .17) 50%), lineair-gradiënt(0, transparant 50%, rgba(255, 255, 255, .19) 50%);
}

5. De moderne baksteen

U kunt een puur CSS modern baksteenpatroon maken met behulp van de lineair-gradiënt CSS-eigenschap.

CSS-code

lichaam {
 achtergrondafbeelding: lineair verloop (45deg, transparant 20%, zwart 25%, transparant 25%),
 lineair verloop (-45deg, transparant 20%, zwart 25%, transparant 25%),
 lineair verloop (-45deg, transparant 75%, zwart 80%, transparant 0),
 radiaal verloop (grijs 2px, transparant 0);
 achtergrondgrootte: 30px 30px, 30px 30px;
}

6. Web3-stijlachtergrond

U kunt een maken Web3-stijl achtergrond door een achtergrondafbeelding te gebruiken en er een vervagingseffect aan toe te voegen. In dit voorbeeld wordt een melkwegafbeelding van Unsplash gebruikt. Je kunt creatief zijn en een afbeelding van een melkwegstelsel, zee, monumenten of iets anders gebruiken.

HTML code

<div klasse="kaart bg-blur">
<h1>Kaart met achtergrondverloop</h1>
</div>

CSS-code

:wortel {
 --bg-afbeelding: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=formatteren&passen = bijsnijden&w=1169&q=80');
}
lichaam {
 Achtergrond kleur: #1D1E22;
 font-familie: schreefloos;
 weergave: flexibel;
}
.kaart {
 marge: automatisch;
 vulling: 1rem;
 hoogte: 300px;
 breedte: 300px;
 tekst uitlijnen: midden;
 kleur wit;
 weergave: flexibel;
 align-items: midden;
 rechtvaardigen-inhoud: centrum;
 positie: relatief;
 achtergrondkleur: grijs;
 grensradius: 10px;
}
.bg-blur {
 overloop verborgen;
 achtergrondkleur: transparant;
}
.bg-blur::voordat {
 inhoud: '';
 achtergrond afbeelding: var(--bg-afbeelding);
 achtergrondformaat: omslag;
 hoogte: 100%;
 breedte: 100%;
 positie: absoluut;
 filter: vervagen (30px);
 z-index: -1;
}

7. Achtergrondanimatie met verloop

Achtergrond met kleurovergang animaties worden veel gebruikt in moderne websites. Blijf trendy en gebruik de verloopanimatie met de achtergrond. U kunt de verloopkleuren ook aanpassen aan uw behoeften.

HTML code

<div klasse="d-flex flex-kolom rechtvaardigen-inhoud-centrum w-100 h-100"></div>

CSS-code

lichaam {
achtergrond: lineair-gradiënt(-45deg, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 achtergrondgrootte: 400% 400%;
 animatie: verloop 15s gemak oneindig;
 hoogte: 100vh;
}
@keyframes verloop {
 0% {
 achtergrondpositie: 0% 50%;
 }
50% {
 achtergrondpositie: 100% 50%;
 }
100% {
 achtergrondpositie: 0% 50%;
 }
}

8. Bochtige golven

U kunt een eenvoudig patroon met golvende golven maken met de radiale-gradiënt CSS-eigenschap.

HTML code

<div klasse="patronen pt1"></div>

CSS-code

lichaam {
 marge: 0px;
}
.patronen {
 breedte: 100vw;
 hoogte: 100vw;
}
.pt1 {
achtergrond: -moz-radiaal verloop(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radiaal verloop(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), geen;
achtergrond: -webkit-radiaal-gradiënt(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radiaal-gradiënt(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), geen;
achtergrond: -ms-radiaal-gradiënt(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radiaal-gradiënt(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), geen;
achtergrond: -o-radiaal-gradiënt(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radiaal-gradiënt(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), geen;
achtergrond: radiale-gradiënt(0% 2%, cirkel, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), radiale-gradiënt(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), geen;
 achtergrondgrootte: 20px 20px;
}

9. Tafelkleed

Een standaard achtergrondpatroon nodig voor uw HTML-div? Probeer dit tafelkleedpatroon.

CSS-code

lichaam {
 achtergrond: wit;
achtergrond afbeelding: lineair-gradiënt(90graden, rgba(200,0,0,.5) 50%, transparant 0),
lineair-gradiënt(rgba(200,0,0,.5) 50%, transparant 0);
 achtergrondgrootte: 30px 30px;
}

10. Glijdende diagonalen

In dit effect schuiven en overlappen de diagonale kleuren elkaar. De vloeiende animatie van het mengen van kleuren kan een aantrekkelijk tintje aan uw website geven.

HTML code

<div klasse="bg"></div>
<div klasse="bg bg2"></div>
<div klasse="bg bg3"></div>
<div klasse="inhoud">
<h1>Glijdende diagonalen Achtergrondeffect</h1>
</div>

CSS-code

html {
hoogte:100%;
}
lichaam {
marge:0;
}
.bg {
animatie:dia 3sgemak-in-uiteindeloosafwisselend;
achtergrond afbeelding: lineair-gradiënt(-60 graden, #6c3 50%, #09f 50%);
onderkant:0;
links:-50%;
ondoorzichtigheid:.5;
positie:vast;
Rechtsaf:-50%;
bovenkant:0;
z-index:-1;
}
.bg2 {
animatie-richting:alternatief-omgekeerd;
animatieduur:4s;
}
.bg3 {
animatieduur:5s;
}
.inhoud {
Achtergrond kleur:rgba (255,255,255,.8);
grens-radius:.25em;
doos-schaduw:0 0 .25emrgba(0,0,0,.25);
doosmaat:border-box;
links:50%;
opvulling:10vmin;
positie:vast;
tekst-uitlijnen:centrum;
bovenkant:50%;
transformeren:vertalen(-50%, -50%);
}
h1 {
font-familie:monospace;
}
@keyframes schuif {
 0% {
transformeren:translateX(-25%);
 }
100% {
transformeren:translateX(25%);
 }
}

Verfraai uw website met CSS

Gebruik deze CSS-achtergrondpatronen om het ontwerp van uw website op te fleuren. U kunt ook uw CSS-productiviteit verhogen met behulp van enkele coole CSS-tips en -trucs. Ze kunnen u helpen met het maken van gelikte ontwerpen in CSS met slechts een paar regels code.

8 essentiële CSS-tips en -trucs die elke ontwikkelaar zou moeten weten

Lees volgende

Over de auteur