Hintergrundmuster können das Aussehen Ihrer Website radikal verändern. Mit CSS können Sie ganz einfach elegante Hintergrundmuster erstellen, die das Design Ihrer Website auf die nächste Stufe heben.
Nachfolgend finden Sie eine Liste mit 10 Hintergrundmustern, die Sie in Ihren Projekten verwenden können.
1. Das schwarze Sechseck
Der Code in diesen Beispielen ist in a verfügbar GitHub-Repository und steht Ihnen kostenlos zur Verfügung unter der MIT-Lizenz.
Dieses schwarze Hexagonmuster liefert einen sehr ordentlichen Hexagonnetzhintergrund. Vor diesem Hintergrund ist der Titel deutlich zu erkennen. Sie können dieses Muster verwenden, wenn Sie technische oder architektonische Websites entwerfen.
HTML Quelltext
<h1>Das schwarze Sechseck</h1>
CSS-Code
Karosserie {
Schriftfamilie: 'Teilen Sie Tech', serifenlos;
Schriftgröße: 68px;
Farbe weiß;
Anzeige: Flex;
jsutify-content: center;
Ausrichtungselemente: Mitte;
Rand: 0;
Breite: 100vw;
Höhe: 100vh;
Textschatten: 8px 8px 10px #0000008c;
Hintergrundfarbe: #343a40;
Hintergrundbild: url("Daten: image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' Breite ='28' Höhe ='49' viewBox='0 0 28 49'%3E%3Cg Füllregel='gerade ungerade'%3E%3Cg id='Sechsecke' füllen='%239C92AC' Füllopazität ='0.25' Füllregel='ungleich Null'%3E%3CPfad 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- 42.15V49h-2z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E"), Linear-Gradient (nach rechts oben, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
Rand: 20px;
}
2. Die Blauen Streifen
Das Hintergrundmuster der blauen Streifen verwendet die linearer Gradient CSS-Eigenschaft zum Erstellen von Verlaufsstreifen über einem Hintergrund. Sie können ändern Sie die Hintergrundfarbe und die Verlaufsfarbe, um Ihre Anforderungen zu erfüllen.
HTML Quelltext
<div-Klasse="Muster pt1"></div>
CSS-Code
Karosserie {
Rand: 0px;
}.Muster {
Breite: 100vw;
Höhe: 100 vw;
}
.pt1 {
Hintergrundgröße: 50px 50px;
Hintergrundfarbe: #0ae;
Hintergrundbild: -webkit-linearer-gradient(RGB(255, 255, 255, .2) 50%, transparent 50%, transparent);
Hintergrundbild: -moz-linearer-gradient(RGB(255, 255, 255, .2) 50%, transparent 50%, transparent);
Hintergrundbild: -ms-linearer-gradient(RGB(255, 255, 255, .2) 50%, transparent 50%, transparent);
Hintergrundbild: -o-linearer Gradient(RGB(255, 255, 255, .2) 50%, transparent 50%, transparent);
Hintergrundbild: linearer Gradient(RGB(255, 255, 255, .2) 50%, transparent 50%, transparent);
}
3. Das Schachbrett
Mit CSS können Sie ganz einfach ein Schachbrett-Designmuster für den Hintergrund erstellen. Versuchen Sie, die Farben anzupassen, um dieses Design zu variieren.
HTML Quelltext
<div-Klasse="Muster pt1"></div>
CSS-Code
Karosserie {
Rand: 0px;
}.Muster {
Breite: 100vw;
Höhe: 100 vw;
}
.pt1 {
Hintergrundfarbe: #iii;
Hintergrundgröße: 60px 60px;
Hintergrundposition: 0 0, 30px 30px;
Hintergrundbild: -webkit-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, schwarz), -webkit-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, Schwarz);
Hintergrundbild: -moz-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, schwarz), -moz-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, Schwarz);
Hintergrundbild: -ms-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, schwarz), -ms-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, Schwarz);
Hintergrundbild: -o-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 %, schwarz 75 %, schwarz), -o-linear-gradient (45 Grad, schwarz 25 %, transparent 25 %, transparent 75 % schwarz 75 % schwarz);
Hintergrundbild: Linear-Gradient (45 Grad, Schwarz 25 %, Transparent 25 %, Transparent 75 %, Schwarz 75 %, Schwarz), Linear-Gradient (45 Grad, Schwarz 25 %, Transparent 25 %, Transparent 75 %, Schwarz 75 %, Schwarz);
}
4. Das stille Meer
Sie können diese einfachen horizontalen Linienmuster verwenden, um jedem HTML-Element einen statischen Hintergrund hinzuzufügen.
HTML Quelltext
<div-Klasse="Muster pt1"></div>
CSS-Code
Karosserie {
Rand: 0px;
}.Muster {
Breite: 100vw;
Höhe: 100 vw;
}
.pt1 {
Hintergrundfarbe: #026873;
Hintergrundgröße: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
Hintergrundbild: -webkit-linearer-gradient(0, RGB(255, 255, 255, .07) 50%, transparent 50%), -webkit-linearer-gradient(0, RGB(255, 255, 255, .13) 50%, transparent 50%), -webkit-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .17) 50%), -webkit-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .19) 50%);
Hintergrundbild: -moz-linearer-gradient(0, RGB(255, 255, 255, .07) 50%, transparent 50%), -moz-linearer-gradient(0, RGB(255, 255, 255, .13) 50%, transparent 50%), -moz-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .17) 50%), -moz-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .19) 50%);
Hintergrundbild: -ms-linearer-gradient(0, RGB(255, 255, 255, .07) 50%, transparent 50%), -ms-linearer-gradient(0, RGB(255, 255, 255, .13) 50%, transparent 50%), -ms-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .17) 50%), -ms-linearer-gradient(0, transparent 50%, RGB(255, 255, 255, .19) 50%);
Hintergrundbild: -o-linearer Gradient(0, RGB(255, 255, 255, .07) 50%, transparent 50%), -o-linearer Gradient(0, RGB(255, 255, 255, .13) 50%, transparent 50%), -o-linearer Gradient(0, transparent 50%, RGB(255, 255, 255, .17) 50%), -o-linearer Gradient(0, transparent 50%, RGB(255, 255, 255, .19) 50%);
Hintergrundbild: linearer Gradient(0, RGB(255, 255, 255, .07) 50%, transparent 50%), linearer Gradient(0, RGB(255, 255, 255, .13) 50%, transparent 50%), linearer Gradient(0, transparent 50%, RGB(255, 255, 255, .17) 50%), linearer Gradient(0, transparent 50%, RGB(255, 255, 255, .19) 50%);
}
5. Der moderne Backstein
Mit dem können Sie ein reines CSS-Muster für moderne Ziegel erstellen linearer Gradient CSS-Eigenschaft.
CSS-Code
Karosserie {
Hintergrundbild: Linear-Gradient (45 Grad, transparent 20 %, schwarz 25 %, transparent 25 %),
linearer Farbverlauf (-45 Grad, transparent 20 %, schwarz 25 %, transparent 25 %),
linearer Farbverlauf (-45 Grad, transparent 75 %, schwarz 80 %, transparent 0),
Radialverlauf (grau 2px, transparent 0);
Hintergrundgröße: 30px 30px, 30px 30px;
}6. Hintergrund im Web3-Stil
Sie können eine erstellen Web3-Stil-Hintergrund mit einem Hintergrundbild und Hinzufügen eines Unschärfeeffekts. Dieses Beispiel verwendet ein Galaxiebild von Unsplash. Sie können kreativ sein und ein Bild von einer Galaxie, einem Meer, Denkmälern oder irgendetwas anderem verwenden.
HTML Quelltext
<div-Klasse="Karte bg-blur">
<h1>Karte mit Hintergrund mit Farbverlauf</h1>
</div>CSS-Code
:Wurzel {
--bg-image: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit = zuschneiden&w=1169&q=80');
}Karosserie {
Hintergrundfarbe: #1D1E22;
Schriftfamilie: serifenlos;
Anzeige: Flex;
}.Karte {
Rand: automatisch;
Polsterung: 1rem;
Höhe: 300px;
Breite: 300px;
Textausrichtung: Mitte;
Farbe weiß;
Anzeige: Flex;
Ausrichtungselemente: Mitte;
justify-content: center;
Position: relativ;
Hintergrundfarbe: grau;
Randradius: 10px;
}.bg-Unschärfe {
Überlauf versteckt;
Hintergrundfarbe: transparent;
}
.bg-Unschärfe::Vor {
Inhalt: '';
Hintergrundbild: Var(--bg-image);
Hintergrundgröße: Cover;
Höhe: 100 %;
Breite: 100 %;
Position: absolut;
Filter: Unschärfe (30px);
Z-Index: -1;
}
7. Hintergrundanimation mit Farbverlauf
Hintergrund mit Farbverlauf Animationen sind in modernen Websites weit verbreitet. Bleiben Sie im Trend und verwenden Sie die Verlaufsanimation mit dem Hintergrund. Sie können die Verlaufsfarben auch an Ihre Bedürfnisse anpassen.
HTML Quelltext
<div-Klasse="d-flex flex-column justify-content-center w-100 h-100"></div>
CSS-Code
Karosserie {
Hintergrund: linearer Gradient(-45 Grad, #ee7752, #e73c7e, #23a6d5, #23d5ab);
Hintergrundgröße: 400 % 400 %;
Animation: Steigung 15s unendlich;
Höhe: 100vh;
}
@Keyframes Farbverlauf {
0% {
Hintergrundposition: 0% 50%;
}50% {
Hintergrundposition: 100% 50%;
}
100% {
Hintergrundposition: 0% 50%;
}
}
8. Kurvige Wellen
Mit können Sie ein einfaches kurviges Wellenmuster erstellen Radial-Gradient CSS-Eigenschaft.
HTML Quelltext
<div-Klasse="Muster pt1"></div>CSS-Code
Karosserie {
Rand: 0px;
}.Muster {
Breite: 100vw;
Höhe: 100 vw;
}
.pt1 {
Hintergrund: -moz-Radialgradient(0% 2%, Kreis, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -moz-Radialgradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), keiner;
Hintergrund: -webkit-radial-gradient(0% 2%, Kreis, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -webkit-radial-gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), keiner;
Hintergrund: -ms-Radialgradient(0% 2%, Kreis, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -ms-Radialgradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), keiner;
Hintergrund: -o-Radialgradient(0% 2%, Kreis, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), -o-Radialgradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), keiner;
Hintergrund: Radial-Gradient(0% 2%, Kreis, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), Radial-Gradient(100% 100%, RGB(96, 16, 48, 0) 9px, #661133 10px, RGB(96, 16, 48, 0) 11px), keiner;
Hintergrundgröße: 20px 20px;
}
9. Tischdecke
Benötigen Sie ein Standard-Hintergrundmuster für Ihr HTML-Div? Probieren Sie dieses Tischdeckenmuster aus.
CSS-Code
Karosserie {
Hintergrund: weiß;
Hintergrundbild: linearer Gradient(90Grad, RGB(200,0,0,.5) 50%, transparent 0),
linearer Gradient(RGB(200,0,0,.5) 50%, transparent 0);
Hintergrundgröße: 30px 30px;
}10. Verschiebbare Diagonalen
Bei diesem Effekt gleiten die diagonalen Farben und überlappen sich. Die reibungslose Animation von Mischfarben kann Ihrer Website eine attraktive Note verleihen.
HTML Quelltext
<div-Klasse="bg"></div>
<div-Klasse="bg bg2"></div>
<div-Klasse="bg bg3"></div>
<div-Klasse="Inhalt">
<h1>Gleitende Diagonalen Hintergrundeffekt</h1>
</div>CSS-Code
html {
Höhe:100%;
}Karosserie {
Gewinnspanne:0;
}.bg {
Animation:gleiten 3sLeichtigkeit-in-outunendlichwechseln;
Hintergrundbild: linearer Gradient(-60 Grad, #6c3 50%, #09f 50%);
Unterseite:0;
links:-50%;
Opazität:.5;
Position:Fest;
Rechts:-50%;
oben:0;
z-index:-1;
}.bg2 {
Animations-Regie:alternativ-umgekehrt;
Animationsdauer:4s;
}.bg3 {
Animationsdauer:5s;
}.Inhalt {
Hintergrundfarbe:rgb (255,255,255,.8);
Grenzradius:.25em;
Box Schatten:0 0 0,25 mRGB(0,0,0,.25);
Box-Größe:border-box;
links:50%;
Polsterung:10min;
Position:Fest;
Textausrichtung:Center;
oben:50%;
verwandeln:übersetzen(-50%, -50%);
}h1 {
Schriftfamilie:Monospace;
}@Keyframes gleiten {
0% {
verwandeln:translateX(-25%);
}
100% {
verwandeln:translateX(25%);
}
}
Verschönern Sie Ihre Website mit CSS
Verwenden Sie diese CSS-Hintergrundmuster, um das Design Ihrer Website aufzupeppen. Sie können Ihre CSS-Produktivität auch mit einigen coolen CSS-Tipps und Tricks steigern. Sie können Ihnen dabei helfen, mit nur wenigen Codezeilen schicke Designs in CSS zu erstellen.
8 grundlegende CSS-Tipps und Tricks, die jeder Entwickler kennen sollte
Lesen Sie weiter
Verwandte Themen
- Programmierung
- Web Entwicklung
- CSS
- Web-Design
Über den Autor
Yuvraj ist Informatikstudent an der Universität von Delhi, Indien. Seine Leidenschaft gilt der Full-Stack-Webentwicklung. Wenn er nicht schreibt, erkundet er die Tiefe verschiedener Technologien.
Abonnieren Sie unseren Newsletter
Abonnieren Sie unseren Newsletter für technische Tipps, Rezensionen, kostenlose E-Books und exklusive Angebote!
Klicken Sie hier, um sich anzumelden
