10 Pola Latar Belakang CSS yang Dapat Anda Gunakan di Situs Web Anda

Pola latar belakang dapat secara radikal mengubah tampilan situs web Anda. Anda dapat dengan mudah membuat pola latar belakang yang elegan menggunakan CSS yang akan membawa desain situs Anda ke tingkat berikutnya.

Di bawah ini adalah daftar 10 pola latar belakang yang dapat Anda gunakan dalam proyek Anda.

1. segi enam hitam

Kode dalam contoh ini tersedia di a Repositori GitHub dan gratis untuk Anda gunakan di bawah lisensi MIT.

Pola segi enam hitam ini memberikan latar belakang jaringan segi enam yang sangat rapi. Judulnya terlihat jelas dengan latar belakang ini. Anda dapat menggunakan pola ini jika Anda mendesain situs web teknologi atau arsitektur.

Kode HTML

<h1>segi enam hitam</h1>

Kode CSS

tubuh {
 font-keluarga: 'Bagikan Teknologi', Sans Serif;
 ukuran font: 68px;
 warna putih;
 tampilan: fleksibel;
 membenarkan-konten: pusat;
 align-item: tengah;
 margin: 0;
 lebar: 100vw;
 tinggi: 100vh;
 bayangan teks: 8px 8px 10px #0000008c;
 warna latar belakang: #343a40;
 gambar latar: url("data: gambar/svg+xml,%3Csvg xmlns=





instagram viewer

'http://www.w3.org/2000/svg' lebar ='28' tinggi ='49' kotak tampilan='0 0 28 49'%3E%3Cg fill-rule='bahkan aneh'%3E%3Cg id='segi enam' isi ='%239C92AC' isi-opacity='0.25' isi-aturan='bukan nol'%3E%3Cjalur 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"), gradien linier (ke kanan atas, #343a40, #2b2c31, #211f22, #151314, #000000);
}
h1 {
 margin: 20 piksel;
}

2. Strip Biru

Pola latar belakang strip biru menggunakan gradien linier Properti CSS untuk membuat strip gradien di atas latar belakang. Kamu bisa ubah warna latar belakang dan warna gradien untuk memenuhi kebutuhan Anda.

Kode HTML

<kelas div="pola pt1"></div>

Kode CSS

tubuh {
 margin: 0 piksel;
}
.pola {
 lebar: 100vw;
 tinggi: 100vw;
}
.pt1 {
 ukuran latar belakang: 50px 50px;
 warna latar belakang: #0a;
gambar latar belakang: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparan 50%, transparan);
gambar latar belakang: -moz-linier-gradien(rgba(255, 255, 255, .2) 50%, transparan 50%, transparan);
gambar latar belakang: -ms-linear-gradient(rgba(255, 255, 255, .2) 50%, transparan 50%, transparan);
gambar latar belakang: -o-linear-gradien(rgba(255, 255, 255, .2) 50%, transparan 50%, transparan);
gambar latar belakang: gradien linier(rgba(255, 255, 255, .2) 50%, transparan 50%, transparan);
}

3. Papan Catur

Anda dapat dengan mudah membuat pola desain latar belakang papan catur menggunakan CSS. Coba sesuaikan warna untuk memvariasikan desain ini.

Kode HTML

<kelas div="pola pt1"></div>

Kode CSS

tubuh {
 margin: 0 piksel;
}
.pola {
 lebar: 100vw;
 tinggi: 100vw;
}
.pt1 {
 warna latar belakang: #ee;
 ukuran latar belakang: 60px 60px;
 posisi latar belakang: 0 0, 30px 30px;
 background-image: -webkit-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam), -webkit-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam);
 background-image: -moz-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam), -moz-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam);
 background-image: -ms-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam), -ms-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam);
 background-image: -o-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam), -o-linear-gradient (45deg, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam);
 gambar latar: gradien linier (45 derajat, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam), gradien linier (45 derajat, hitam 25%, transparan 25%, transparan 75%, hitam 75%, hitam);
}

4. Laut yang sunyi

Anda dapat menggunakan pola garis horizontal sederhana ini untuk menambahkan latar belakang statis ke elemen HTML apa pun.

Kode HTML

<kelas div="pola pt1"></div>

Kode CSS

tubuh {
 margin: 0 piksel;
}
.pola {
 lebar: 100vw;
 tinggi: 100vw;
}
.pt1 {
 warna latar belakang: #026873;
 ukuran latar belakang: 13px 13px, 29px 29px, 37px 37px, 53px 53px;
gambar latar belakang: -webkit-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparan 50%), -webkit-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparan 50%), -webkit-linear-gradient(0, transparan 50%, rgba(255, 255, 255, .17) 50%), -webkit-linear-gradient(0, transparan 50%, rgba(255, 255, 255, .19) 50%);
gambar latar belakang: -moz-linier-gradien(0, rgba(255, 255, 255, .07) 50%, transparan 50%), -moz-linier-gradien(0, rgba(255, 255, 255, .13) 50%, transparan 50%), -moz-linier-gradien(0, transparan 50%, rgba(255, 255, 255, .17) 50%), -moz-linier-gradien(0, transparan 50%, rgba(255, 255, 255, .19) 50%);
gambar latar belakang: -ms-linear-gradient(0, rgba(255, 255, 255, .07) 50%, transparan 50%), -ms-linear-gradient(0, rgba(255, 255, 255, .13) 50%, transparan 50%), -ms-linear-gradient(0, transparan 50%, rgba(255, 255, 255, .17) 50%), -ms-linear-gradient(0, transparan 50%, rgba(255, 255, 255, .19) 50%);
gambar latar belakang: -o-linear-gradien(0, rgba(255, 255, 255, .07) 50%, transparan 50%), -o-linear-gradien(0, rgba(255, 255, 255, .13) 50%, transparan 50%), -o-linear-gradien(0, transparan 50%, rgba(255, 255, 255, .17) 50%), -o-linear-gradien(0, transparan 50%, rgba(255, 255, 255, .19) 50%);
gambar latar belakang: gradien linier(0, rgba(255, 255, 255, .07) 50%, transparan 50%), gradien linier(0, rgba(255, 255, 255, .13) 50%, transparan 50%), gradien linier(0, transparan 50%, rgba(255, 255, 255, .17) 50%), gradien linier(0, transparan 50%, rgba(255, 255, 255, .19) 50%);
}

5. Bata Modern

Anda dapat membuat pola bata modern CSS murni menggunakan gradien linier properti CSS.

Kode CSS

tubuh {
 background-image: linear-gradient (45deg, transparan 20%, hitam 25%, transparan 25%),
 linear-gradient (-45deg, transparan 20%, hitam 25%, transparan 25%),
 gradien linier (-45deg, transparan 75%, hitam 80%, transparan 0),
 radial-gradien (abu-abu 2px, transparan 0);
 ukuran latar belakang: 30px 30px, 30px 30px;
}

6. Latar Belakang Gaya Web3

Anda dapat membuat Web3-gaya latar belakang menggunakan gambar latar belakang dan menambahkan efek buram ke dalamnya. Contoh ini menggunakan gambar galaksi dari Unsplash. Anda dapat berkreasi dan menggunakan gambar galaksi, laut, monumen, atau apa pun.

Kode HTML

<kelas div="kartu bg-blur">
<h1>Kartu dengan Latar Belakang Gradien</h1>
</div>

Kode CSS

:akar {
 --bg-gambar: url('https://images.unsplash.com/photo-1538370965046-79c0d6907d47?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&otomatis = format&cocok = panen&w=1169&q=80');
}
tubuh {
 warna latar belakang: #1D1E22;
 font-family: sans-serif;
 tampilan: fleksibel;
}
.kartu {
 margin: otomatis;
 bantalan: 1 rem;
 tinggi: 300 piksel;
 lebar: 300 piksel;
 perataan teks: tengah;
 warna putih;
 tampilan: fleksibel;
 align-item: tengah;
 justify-content: pusat;
 posisi: relatif;
 warna latar belakang: abu-abu;
 batas-radius: 10px;
}
.bg-blur {
 melimpah: tersembunyi;
 warna latar: transparan;
}
.bg-blur::sebelum {
 isi: '';
 gambar latar belakang: var(--bg-gambar);
 ukuran latar belakang: sampul;
 tinggi: 100%;
 lebar: 100%;
 posisi: mutlak;
 filter: buram (30 piksel);
 indeks-z: -1;
}

7. Animasi Latar Belakang Gradien

Latar belakang gradien animasi banyak digunakan di situs web modern. Tetap tren dan gunakan animasi gradien dengan latar belakang. Anda juga dapat menyesuaikan warna gradien sesuai dengan kebutuhan Anda.

Kode HTML

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

Kode CSS

tubuh {
Latar Belakang: gradien linier(-45 derajat, #ee7752, #e73c7e, #23a6d5, #23d5ab);
 ukuran latar belakang: 400% 400%;
 animasi: gradien 15s memudahkan tanpa batas;
 tinggi: 100vh;
}
@keyframes gradien {
 0% {
 posisi latar belakang: 0% 50%;
 }
50% {
 posisi latar belakang: 100% 50%;
 }
100% {
 posisi latar belakang: 0% 50%;
 }
}

8. Gelombang melengkung

Anda dapat membuat pola gelombang melengkung sederhana menggunakan gradien radial properti CSS.

Kode HTML

<kelas div="pola pt1"></div>

Kode CSS

tubuh {
 margin: 0 piksel;
}
.pola {
 lebar: 100vw;
 tinggi: 100vw;
}
.pt1 {
Latar Belakang: -moz-radial-gradien(0% 2%, lingkaran, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -moz-radial-gradien(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), tidak ada;
Latar Belakang: -webkit-radial-gradien(0% 2%, lingkaran, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -webkit-radial-gradien(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), tidak ada;
Latar Belakang: -ms-radial-gradien(0% 2%, lingkaran, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -ms-radial-gradien(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), tidak ada;
Latar Belakang: -o-radial-gradien(0% 2%, lingkaran, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), -o-radial-gradien(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), tidak ada;
Latar Belakang: gradien radial(0% 2%, lingkaran, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), gradien radial(100% 100%, rgba(96, 16, 48, 0) 9px, #661133 10px, rgba(96, 16, 48, 0) 11px), tidak ada;
 ukuran latar belakang: 20px 20px;
}

9. Taplak

Perlu pola latar belakang standar untuk div HTML Anda? Coba pola taplak meja ini.

Kode CSS

tubuh {
 latar belakang: putih;
gambar latar belakang: gradien linier(90derajat, rgba(200,0,0,.5) 50%, transparan 0),
gradien linier(rgba(200,0,0,.5) 50%, transparan 0);
 ukuran latar belakang: 30px 30px;
}

10. geser diagonal

Dalam efek ini, warna diagonal meluncur dan tumpang tindih satu sama lain. Animasi halus dari pencampuran warna dapat menambahkan sentuhan menarik ke situs web Anda.

Kode HTML

<kelas div="bg"></div>
<kelas div="bg bg2"></div>
<kelas div="bg bg3"></div>
<kelas div="isi">
<h1>Efek Latar Belakang Geser Diagonal</h1>
</div>

Kode CSS

html {
tinggi:100%;
}
tubuh {
batas:0;
}
.bg {
animasi:menggeser 3skemudahan masuktak terbatasbergantian;
gambar latar belakang: gradien linier(-60 derajat, #6c3 50%, #09f 50%);
dasar:0;
kiri:-50%;
kegelapan:.5;
posisi:tetap;
Baik:-50%;
atas:0;
indeks-z:-1;
}
.bg2 {
animasi-arah:alternatif-terbalik;
animasi-durasi:4s;
}
.bg3 {
animasi-durasi:5s;
}
.isi {
warna latar belakang:rgba (255,255,255,.8);
radius batas:.25em;
bayangan kotak:0 0 .25emrgba(0,0,0,.25);
ukuran kotak:kotak-perbatasan;
kiri:50%;
lapisan:10vmin;
posisi:tetap;
perataan teks:tengah;
atas:50%;
mengubah:terjemahkan(-50%, -50%);
}
h1 {
font-family:monospace;
}
@keyframes menggeser {
 0% {
mengubah:translateX(-25%);
 }
100% {
mengubah:translateX(25%);
 }
}

Merapikan Situs Web Anda Menggunakan CSS

Gunakan pola latar belakang CSS ini untuk merapikan desain situs web Anda. Anda juga dapat meningkatkan produktivitas CSS Anda menggunakan beberapa tips dan trik CSS yang keren. Mereka dapat membantu Anda membuat desain yang apik di CSS hanya dengan beberapa baris kode.

8 Tip dan Trik Penting CSS yang Harus Diketahui Setiap Pengembang

Baca Selanjutnya

Tentang Penulis