Koleksi 7 Background Bermotif dengan Pure CSS Repeating Gradient

Iseng-iseng kali ini Saya membagikan 7 background bermotif yang barang kali bisa Sobat gunakan sebagai referensi atau latar belakang (Background) dari elemen atau halaman website Sobat. Background bermotif dibawah ini menggunakan pure / murni CSS, dan bisa Sobat kreasikan.

Berikut ini tampilan dari background-background murni CSS tersebut :

1.

background:repeating-radial-gradient(
#6cf,#6cf 3px,
transparent 3px,transparent 6px,
#6cf 6px,#6cf 10px,
white 10px,white 14px,
#6cf 14px,#6cf 17px,
transparent 17px,transparent 25px
),
repeating-radial-gradient(
#6cf,#6cf 3px,
transparent 3px,transparent 6px,
#fff 6px,#fff 17px,
transparent 17px,transparent 25px
);
background-blend-mode: multiply;
background-size: 50px 50px,100px 100px;

2.

background:repeating-radial-gradient(
#d65,#d65 3px,
transparent 3px,transparent 6px,
#b65 6px,#b65 10px,
white 10px,white 14px,
#f65 14px,#f65 17px,
transparent 17px,transparent 45px
), repeating-linear-gradient(
45deg,#b65,#b65 3px,
transparent 3px,transparent 50px
);
background-blend-mode: multiply;
background-size: 70px 70px;
background-position: 0,10px 43px;

3.

background:repeating-radial-gradient(circle at left top,
transparent, transparent 40.5px,#292 40.5px,#292 43.5px,
transparent 43.5px,transparent 46.5px,
#999 46.5px,#999 49.5px,
transparent 49.5px,transparent 83px
),repeating-radial-gradient(circle at right bottom,
transparent, transparent 31px,#999 31px,#999 34px,
transparent 34px,transparent 37px,
#292 37px,#292 40px,
transparent 40px,transparent 83px
),repeating-radial-gradient(circle at left bottom,
transparent, transparent 40.5px,#55b 40.5px,#55b 43.5px,
transparent 43.5px,transparent 46.5px,
#fcb 46.5px,#fcb 49.5px,
transparent 49.5px,transparent 83px
),repeating-radial-gradient(circle at right top,
transparent, transparent 31px,#fcb 31px,#fcb 34px,
transparent 34px,transparent 37px,
#55b 37px,#55b 40px,
transparent 40px,transparent 83px
);
background-blend-mode: multiply;
background-size: 80px 80px;

4.

background:
repeating-radial-gradient(#999,#fff,#bbb 7px, #bbb 10px,transparent 10px, transparent 30px),
repeating-linear-gradient(-45deg,#555, #555 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(45deg, #944, #944 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(-135deg,#222, #222 5px, transparent 5px, transparent 50px),
repeating-linear-gradient(135deg, #9df, #9df 5px, transparent 5px, transparent 50px);
background-blend-mode: multiply;
background-size: 50px 50px;

5.

background:
repeating-radial-gradient(#999,#fff 5px,#bbb 7px, #bbb 10px,transparent 10px, transparent 66px),
repeating-radial-gradient(circle at left top, #ddd, #ddd 6px, transparent),
repeating-radial-gradient(circle at right top, #6cf, #6cf 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at right bottom, #6cf, #6cf 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at left top, #8cb, #8cb 6px, transparent 6px, transparent 67px),
repeating-radial-gradient(circle at left bottom, #8cb, #8cb 6px, transparent 6px, transparent 67px)
;
background-blend-mode: multiply;
background-size: 100px 100px;

6.

background:
repeating-radial-gradient(circle at right top, #922, #922 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at right bottom, #fd8, #fd8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at left top, #da8, #da8 6px, transparent 6px, rgba(0,0,105,0.1) 67px),
repeating-radial-gradient(circle at left bottom, #fbb, #fbb 6px, transparent 6px, rgba(0,0,105,0.1) 67px)
;
background-blend-mode: multipy;
background-size: 60px 130px;

7.

background:repeating-linear-gradient(90deg,white, white 35px,transparent 50px, transparent 100px),
repeating-linear-gradient(70deg,transparent, transparent 30px,#fff 10px, #052 40px),
repeating-linear-gradient(90deg,transparent, transparent 50px,#555 50px, #222 100px)
;

Untuk mengganti warna dari contoh-contoh background diatas gunakan Color Generator. Untuk mempelajari atau memahami cara membuat nya selengkapnya pada artikel Tutorial Membuat Background bermotif. Silahkan Sobat berkreatifitas.

Demikianlah artikel ini Saya buat, semoga dapat bermanfaat. Terima Kasih.