Corak Latar Belakang
HTML view
Demo/Demo
HTML view
<style>
body {
background: linear-gradient(to right, #cfe2f3 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to left, #cfe2f3 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to right, rgba(0,0,0,0) 48%, #cfe2f3 48% 52%, rgba(0,0,0,0) 52%) 0 0/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 90%, #cfe2f3 90.5%) -1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 90%, #cfe2f3 90.5%) 1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 29%, #cfe2f3 29.5% 30.5%, rgba(0,0,0,0) 31%) -0.02em -0.308em/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 29%, #cfe2f3 29.5% 30.5%, rgba(0,0,0,0) 31%) 0.02em -0.308em/2em 1.5em, linear-gradient(50deg, #cfe2f3 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(-50deg, #cfe2f3 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(130deg, #cfe2f3 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(-130deg, #cfe2f3 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(130deg, rgba(0,0,0,0) 95%, #cfe2f3 95.5%) -1em -0.7em/2em 1.5em, linear-gradient(-130deg, rgba(0,0,0,0) 95%, #cfe2f3 95.5%) 1em -0.7em/2em 1.5em, repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 4%, rgba(0,0,0,0.2) 4% 6.5%, rgba(0,0,0,0) 6.5%) 0.42em 0 /3em 1.5em, linear-gradient(50deg, rgba(244,164,96,0) 86%, #d3d3d3 86%) -1em 20.19em/2em 22.5em, linear-gradient(-50deg, rgba(244,164,96,0) 86%, #d3d3d3 86%) 1em 20.19em/2em 22.5em, linear-gradient(50deg, rgba(255,182,193,0) 86%, #eee 86%) -1em 5.175000000000001em/2em 22.5em, linear-gradient(-50deg, rgba(255,182,193,0) 86%, #eee 86%) 1em 5.175000000000001em/2em 22.5em, linear-gradient(to bottom, #eee 33%, rgba(255,182,193,0) 33%) 0 0/100% 22.5em, linear-gradient(50deg, rgba(255,105,180,0) 86%, #e3e3e3 86%) -1em 9.675em/2em 22.5em, linear-gradient(-50deg, rgba(255,105,180,0) 86%, #e3e3e3 86%) 1em 9.675em/2em 22.5em, linear-gradient(to bottom, #e3e3e3 20%, rgba(255,105,180,0) 20%) 0 7.800000000000001em/100% 22.5em, linear-gradient(50deg, rgba(199,21,133,0) 86%, #ddd 86%) -1em 14.174999999999999em/2em 22.5em, linear-gradient(-50deg, rgba(199,21,133,0) 86%, #ddd 86%) 1em 14.174999999999999em/2em 22.5em, linear-gradient(to bottom, #ddd 20%, rgba(199,21,133,0) 20%) 0 12.3em/100% 22.5em;
background-color: #d3d3d3;
background-attachment: fixed;
}
</style>
body {
background: linear-gradient(to right, #cfe2f3 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to left, #cfe2f3 2.5%, rgba(0,0,0,0) 2.5%) 0 0/2em 1.5em, linear-gradient(to right, rgba(0,0,0,0) 48%, #cfe2f3 48% 52%, rgba(0,0,0,0) 52%) 0 0/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 90%, #cfe2f3 90.5%) -1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 90%, #cfe2f3 90.5%) 1em 0.8em/2em 1.5em, linear-gradient(-50deg, rgba(0,0,0,0) 29%, #cfe2f3 29.5% 30.5%, rgba(0,0,0,0) 31%) -0.02em -0.308em/2em 1.5em, linear-gradient(50deg, rgba(0,0,0,0) 29%, #cfe2f3 29.5% 30.5%, rgba(0,0,0,0) 31%) 0.02em -0.308em/2em 1.5em, linear-gradient(50deg, #cfe2f3 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(-50deg, #cfe2f3 12%, rgba(0,0,0,0) 12.5%) 0 -1.02em/2em 1.5em, linear-gradient(130deg, #cfe2f3 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(-130deg, #cfe2f3 5%, rgba(0,0,0,0) 5.5%) 0 0.46em/2em 1.5em, linear-gradient(130deg, rgba(0,0,0,0) 95%, #cfe2f3 95.5%) -1em -0.7em/2em 1.5em, linear-gradient(-130deg, rgba(0,0,0,0) 95%, #cfe2f3 95.5%) 1em -0.7em/2em 1.5em, repeating-linear-gradient(to right, rgba(0,0,0,0), rgba(0,0,0,0) 4%, rgba(0,0,0,0.2) 4% 6.5%, rgba(0,0,0,0) 6.5%) 0.42em 0 /3em 1.5em, linear-gradient(50deg, rgba(244,164,96,0) 86%, #d3d3d3 86%) -1em 20.19em/2em 22.5em, linear-gradient(-50deg, rgba(244,164,96,0) 86%, #d3d3d3 86%) 1em 20.19em/2em 22.5em, linear-gradient(50deg, rgba(255,182,193,0) 86%, #eee 86%) -1em 5.175000000000001em/2em 22.5em, linear-gradient(-50deg, rgba(255,182,193,0) 86%, #eee 86%) 1em 5.175000000000001em/2em 22.5em, linear-gradient(to bottom, #eee 33%, rgba(255,182,193,0) 33%) 0 0/100% 22.5em, linear-gradient(50deg, rgba(255,105,180,0) 86%, #e3e3e3 86%) -1em 9.675em/2em 22.5em, linear-gradient(-50deg, rgba(255,105,180,0) 86%, #e3e3e3 86%) 1em 9.675em/2em 22.5em, linear-gradient(to bottom, #e3e3e3 20%, rgba(255,105,180,0) 20%) 0 7.800000000000001em/100% 22.5em, linear-gradient(50deg, rgba(199,21,133,0) 86%, #ddd 86%) -1em 14.174999999999999em/2em 22.5em, linear-gradient(-50deg, rgba(199,21,133,0) 86%, #ddd 86%) 1em 14.174999999999999em/2em 22.5em, linear-gradient(to bottom, #ddd 20%, rgba(199,21,133,0) 20%) 0 12.3em/100% 22.5em;
background-color: #d3d3d3;
background-attachment: fixed;
}
</style>
CSS dirujuk di codepen.io/lynnandtonic/pen/rNPxZpY
Ulasan