Background Pattern CSS

Assalamualaikum Wr.Wb underground-404 - kali ini mau share css, yang kemaren kan share caranya nambahin css di widget, kalo post hari ini saya mau share tentang background pattern tapi menggunakan css bukan gambar. Mikir-mikir ini insya allah gak ngeberatin dah, ane cari yg gak gede2 kok. Mungkin pada belom tau carnya masang yah?? saya beritahu caranya dulu yah, entar tinggal pilih kodenya dan pasang dah

1. Login dengan id agan dahulu
2. Masuk ke Rancangan -> Edit html
3. Cari kode body{ atau body { carinya biar cepet tinggal teken ctrl + f
   kalau sudah ketemu kode diatas, tinggal cari kode background di bawah kode body { tersebut
   
4. Kalau sudah ketemu kode background agan-agan tinggal replace dah kode css pattern di bawah

KALAU MAU LIAT DEMONYA, PAKAI MOZZILA FIREFOX
tpi kalu sudah terpasang di template agan-agan bisa dilihat selain mozzila firefox (google chrome).
Ini dikarenakan dari blogger sendiri gak bisa nerima doble css, bisanya cuman satu yg mozzila

kurang lebih 851 B

background:
-moz-linear-gradient(45deg, #92baac 45px, transparent 45px),
-moz-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-moz-linear-gradient(225deg, transparent 46px, #e1ebbd 46px, #e1ebbd 91px, transparent 91px),
-moz-linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px),
-webkit-linear-gradient(45deg, #92baac 45px, transparent 45px)64px 64px,
-webkit-linear-gradient(225deg, transparent 46px, #e1ebbd 46px, #e1ebbd 91px, transparent 91px),
-webkit-linear-gradient(-45deg, #92baac 23px, transparent 23px, transparent 68px,#92baac 68px,#92baac 113px,transparent 113px,transparent 158px,#92baac 158px);
background-color:#e1ebbd;
background-size: 128px 130px

kurang lebih 408 B

background-color:#def;
background-image: -moz-radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
-moz-radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
-webkit-radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%),
-webkit-radial-gradient(closest-side, transparent 98%, rgba(0,0,0,.3) 99%);
background-size:80px 80px;
background-position:0 0, 40px 40px;

kurang lebih 614 B

background-color:white;
background-image:
-moz-radial-gradient(midnightblue 9px, transparent 10px),
-moz-repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
-webkit-radial-gradient(midnightblue 9px, transparent 10px),
-webkit-repeating-radial-gradient(midnightblue 0, midnightblue 4px, transparent 5px, transparent 20px, midnightblue 21px, midnightblue 25px, transparent 26px, transparent 50px);
background-size: 30px 30px, 90px 90px;
background-position: 0 0;

kurang lebih 3.41 KB

background-color: hsl(2, 57%, 40%);
background-image: -moz-repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-moz-repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-moz-repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
-webkit-repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-webkit-repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-webkit-repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);
-o-repeating-linear-gradient(transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-o-repeating-linear-gradient(180deg, transparent, transparent 50px, rgba(0,0,0,.4) 50px, rgba(0,0,0,.4) 53px, transparent 53px, transparent 63px, rgba(0,0,0,.4) 63px, rgba(0,0,0,.4) 66px, transparent 66px, transparent 116px, rgba(0,0,0,.5) 116px, rgba(0,0,0,.5) 166px, rgba(255,255,255,.2) 166px, rgba(255,255,255,.2) 169px, rgba(0,0,0,.5) 169px, rgba(0,0,0,.5) 179px, rgba(255,255,255,.2) 179px, rgba(255,255,255,.2) 182px, rgba(0,0,0,.5) 182px, rgba(0,0,0,.5) 232px, transparent 232px),
-o-repeating-linear-gradient(-35deg, transparent, transparent 2px, rgba(0,0,0,.2) 2px, rgba(0,0,0,.2) 3px, transparent 3px, transparent 5px, rgba(0,0,0,.2) 5px);

kurang lebih 287 B

background-color:black;
background-image:
-moz-radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
-moz-radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
-moz-radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
-moz-radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
-webkit-radial-gradient(white, rgba(255,255,255,.2) 2px, transparent 40px),
-webkit-radial-gradient(white, rgba(255,255,255,.15) 1px, transparent 30px),
-webkit-radial-gradient(white, rgba(255,255,255,.1) 2px, transparent 40px),
-webkit-radial-gradient(rgba(255,255,255,.4), rgba(255,255,255,.1) 2px, transparent 30px);
background-size: 550px 550px, 350px 350px, 250px 250px, 150px 150px;
background-position: 0 0, 40px 60px, 130px 270px, 70px 100px;

kurang lebih 318 B

background-color:#001;
background-image: -moz-radial-gradient(white 15%, transparent 16%),
-moz-radial-gradient(white 15%, transparent 16%);
-webkit-radial-gradient(white 15%, transparent 16%),
-webkit-radial-gradient(white 15%, transparent 16%);
background-size:60px 60px;
background-position: 0 0, 30px 30px;

kurang lebih 673 B

background-color:#269;
background-image: -moz-linear-gradient(white 2px, transparent 2px),
-moz-linear-gradient(0, white 2px, transparent 2px),
-moz-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-moz-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
-webkit-linear-gradient(white 2px, transparent 2px),
-webkit-linear-gradient(0, white 2px, transparent 2px),
-webkit-linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px),
-webkit-linear-gradient(0, rgba(255,255,255,.3) 1px, transparent 1px);
background-size:100px 100px, 100px 100px, 20px 20px, 20px 20px;
background-position:-2px -2px, -2px -2px, -1px -1px, -1px -1px

oh iya, kayaknya ini baru bisa di 2 web browser saja yang saya ketahui tp coba aja gan, mungkin bisa kalau beruntung :D
mungkin baru itu saja yang saya masukkan ke postingan kali ini, bila dilain waktu ada kesempatan saya post lagi gan. Wassalamualaikum Wr.Wb