Demo: Gradient Patterns
The background patterns in this demo are created using nothing but CSS3 linear-gradients that are tiled. The patterns below are borrowed (with slight modifications) from Lea Verou's CSS3 Patterns Gallery and from her original post on the topic of building patterns with gradients.
These demos work properly in IE 9 thanks to PIE. They do not work in IE 6-8 due to lack of support for sizing/positioning of linear-gradient as a tiled background.
-
Horizontal Stripes
CSS Code:
background-size: 50px 50px; background-color: #0ae; background-image: -webkit-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); -pie-background: linear-gradient(rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px #0ae; behavior: url(/pie/PIE.htc); -
Vertical Stripes
CSS Code:
background-size: 50px 50px; background-color: #f90; background-image: -webkit-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: -moz-linear-gradient(0deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); background-image: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent); -pie-background: linear-gradient(90deg, rgba(255, 255, 255, .2) 50%, transparent 50%, transparent) 0 0 / 50px 50px #f90; behavior: url(/pie/PIE.htc); -
Picnic
CSS Code:
background-size: 50px 50px; background-color: white; background-image: -webkit-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -webkit-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: -moz-linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), -moz-linear-gradient(0deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); background-image: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)), linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)); -pie-background: linear-gradient(transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px, linear-gradient(90deg, transparent 50%, rgba(200, 0, 0, .5) 50%, rgba(200, 0, 0, .5)) 0 0 / 50px 50px white; behavior: url(/pie/PIE.htc); -
Angled
CSS Code:
background-size: 50px 50px; background-color: #ac0; background-image: -webkit-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); -pie-background: linear-gradient(45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) 0 0 / 50px 50px #ac0; behavior: url(/pie/PIE.htc); -
Angled 135
CSS Code:
background-size: 50px 50px; background-color: #c16; background-image: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: -moz-linear-gradient(-45deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); background-image: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent); -pie-background: linear-gradient(135deg, rgba(255, 255, 255, .2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, .2) 75%, transparent 75%, transparent) 0 0 / 50px 50px, #c16; behavior: url(/pie/PIE.htc); -
Checkerboard
CSS Code:
background-color: #eee; background-size: 60px 60px; background-position: 0 0, 30px 30px; background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); -pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px, linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 30px 30px / 60px, #eee; behavior: url(/pie/PIE.htc); -
Diagonal checkerboard
CSS Code:
background-color: #eee; background-size: 60px 60px; background-image: -webkit-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -webkit-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: -moz-linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), -moz-linear-gradient(-45deg, black 25%, transparent 25%, transparent 75%, black 75%, black); background-image: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black), linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black); -pie-background: linear-gradient(45deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px, linear-gradient(135deg, black 25%, transparent 25%, transparent 75%, black 75%, black) 0 0 / 60px, #eee; behavior: url(/pie/PIE.htc); -
Carbon
Created by Atle Mo (design), Sébastien Grosjean (code) (source)
CSS Code:
background: -webkit-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, -webkit-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -webkit-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, -webkit-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, -webkit-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), -webkit-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background: -moz-linear-gradient(63deg, #151515 5px, transparent 5px) 0 5px, -moz-linear-gradient(243deg, #151515 5px, transparent 5px) 10px 0px, -moz-linear-gradient(63deg, #222 5px, transparent 5px) 0px 10px, -moz-linear-gradient(243deg, #222 5px, transparent 5px) 10px 5px, -moz-linear-gradient(0deg, #1b1b1b 10px, transparent 10px), -moz-linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px), linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424); background-size: 20px 20px; background-color: #131313; -pie-background: linear-gradient(27deg, #151515 5px, transparent 5px) 0 5px / 20px, linear-gradient(207deg, #151515 5px, transparent 5px) 10px 0px / 20px, linear-gradient(27deg, #222 5px, transparent 5px) 0px 10px / 20px, linear-gradient(207deg, #222 5px, transparent 5px) 10px 5px / 20px, linear-gradient(90deg, #1b1b1b 10px, transparent 10px) 0 0 / 20px, linear-gradient(#1d1d1d 25%, #1a1a1a 25%, #1a1a1a 50%, transparent 50%, transparent 75%, #242424 75%, #242424) 0 0 / 20px #131313; behavior: url(/pie/PIE.htc); -
Steps
Created by Nicolas Gallagher (source)
CSS Code:
background-color: #FF7D9D; background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 33px 6px, 0px 36px, 4px 2px, 29px 6px, 33px 30px; background-image: -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(115deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(295deg, #C90032 23px, transparent 23px), -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(115deg, #C90032 10px, transparent 10px), -webkit-linear-gradient(295deg, #C90032 10px, transparent 10px); background-image: -moz-linear-gradient(115deg, #C90032 23px, transparent 23px), -moz-linear-gradient(295deg, #C90032 23px, transparent 23px), -moz-linear-gradient(115deg, #C90032 23px, transparent 23px), -moz-linear-gradient(295deg, #C90032 23px, transparent 23px), -moz-linear-gradient(115deg, #C90032 10px, transparent 10px), -moz-linear-gradient(295deg, #C90032 10px, transparent 10px), -moz-linear-gradient(115deg, #C90032 10px, transparent 10px), -moz-linear-gradient(295deg, #C90032 10px, transparent 10px); background-image: linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 23px, transparent 23px), linear-gradient(155deg, #C90032 23px, transparent 23px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px), linear-gradient(335deg, #C90032 10px, transparent 10px), linear-gradient(155deg, #C90032 10px, transparent 10px); -pie-background: linear-gradient(335deg, #C90032 23px, transparent 23px) 0 2px / 58px, linear-gradient(155deg, #C90032 23px, transparent 23px) 4px 35px / 58px, linear-gradient(335deg, #C90032 23px, transparent 23px) 29px 31px / 58px, linear-gradient(155deg, #C90032 23px, transparent 23px) 33px 6px / 58px, linear-gradient(335deg, #C90032 10px, transparent 10px) 0 36px / 58px, linear-gradient(155deg, #C90032 10px, transparent 10px) 4px 2px / 58px, linear-gradient(335deg, #C90032 10px, transparent 10px) 29px 6px / 58px, linear-gradient(155deg, #C90032 10px, transparent 10px) 33px 30px / 58px, #FF7D9D; behavior: url(/pie/PIE.htc); -
Stars
Created by Nicolas Gallagher (source)
CSS Code:
background: -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px, -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -webkit-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -webkit-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px, -webkit-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -webkit-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -webkit-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -webkit-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background: -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -70px 43px, -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 30px 43px, -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, -moz-linear-gradient(126deg, #232927 4%, transparent 4%) -20px 93px, -moz-linear-gradient( 54deg, #232927 4%, transparent 4%) 80px 93px, -moz-linear-gradient( 18deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, -moz-linear-gradient(162deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, -moz-linear-gradient(234deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, -moz-linear-gradient(-54deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px; background-color: #232927; background-size: 100px 100px; -pie-background: linear-gradient(324deg, #232927 4%, transparent 4%) -70px 43px / 100px, linear-gradient( 36deg, #232927 4%, transparent 4%) 30px 43px / 100px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 30px 43px / 100px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -70px 43px / 100px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -70px 23px / 100px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 30px 23px / 100px, linear-gradient(324deg, #232927 4%, transparent 4%) -20px 93px / 100px, linear-gradient( 36deg, #232927 4%, transparent 4%) 80px 93px / 100px, linear-gradient( 72deg, #e3d7bf 8.5%, transparent 8.5%) 80px 93px / 100px, linear-gradient(288deg, #e3d7bf 8.5%, transparent 8.5%) -20px 93px / 100px, linear-gradient(216deg, #e3d7bf 7.5%, transparent 7.5%) -20px 73px / 100px, linear-gradient(144deg, #e3d7bf 7.5%, transparent 7.5%) 80px 73px / 100px #232927; behavior: url(/pie/PIE.htc); -
Bricks
Created by Tab Atkins Jr (source)
CSS Code:
background-color: silver; background-size: 58px 58px; background-position: 0px 2px, 4px 35px, 29px 31px, 34px 6px; background-image: -webkit-linear-gradient(115deg, #b00 23px, transparent 23px), -webkit-linear-gradient(295deg, #d00 23px, transparent 23px), -webkit-linear-gradient(115deg, #b00 23px, transparent 23px), -webkit-linear-gradient(295deg, #d00 23px, transparent 23px); background-image: -moz-linear-gradient(115deg, #b00 23px, transparent 23px), -moz-linear-gradient(295deg, #d00 23px, transparent 23px), -moz-linear-gradient(115deg, #b00 23px, transparent 23px), -moz-linear-gradient(295deg, #d00 23px, transparent 23px); background-image: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px, linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px, linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px, linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px; -pie-background: linear-gradient(335deg, #b00 23px, transparent 23px) 0 2px / 58px, linear-gradient(155deg, #d00 23px, transparent 23px) 4px 35px / 58px, linear-gradient(335deg, #b00 23px, transparent 23px) 29px 31px / 58px, linear-gradient(155deg, #d00 23px, transparent 23px) 34px 6px / 58px, silver; behavior: url(/pie/PIE.htc); -
Japanese cube
CSS Code:
background-color:#556; background-size: 80px 140px; background-position: 0 0, 0 0, 40px 70px, 40px 70px, 0 0, 40px 70px; background-image: -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), -webkit-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-image: -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -moz-linear-gradient(60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -moz-linear-gradient(-60deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445), -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a), -moz-linear-gradient(30deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a); background-image: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0, linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0, linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px, linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px, linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0, linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px; -pie-background: linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px, linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 0 0 / 80px 140px, linear-gradient(30deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px, linear-gradient(150deg, #445 12%, transparent 12.5%, transparent 87%, #445 87.5%, #445) 40px 70px / 80px 140px, linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 0 0 / 80px 140px, linear-gradient(60deg, #99a 25%, transparent 25.5%, transparent 75%, #99a 75%, #99a) 40px 70px / 80px 140px, #556; behavior: url(/pie/PIE.htc); -
Lined paper
Created by Sarah Backhouse (source)
CSS Code:
background-color: #fff; background-size: 100% 1.2em; background-image: -webkit-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -webkit-linear-gradient(#eee .05em, transparent .05em); background-image: -moz-linear-gradient(0deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), -moz-linear-gradient(#eee .05em, transparent .05em); background-image: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px), linear-gradient(#eee .05em, transparent .05em); -pie-background: linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px) 0 0 / 100% 1.2em, linear-gradient(#eee .05em, transparent .05em) 0 0 / 100% 1.2em #fff; behavior: url(/pie/PIE.htc); -
Blueprint grid
CSS Code:
background-color: #269; background-size: 100px 100px, 100px 100px, 20px 20px, 20px 20px; background-position: -2px -2px, -2px -2px, -1px -1px, -1px -1px; background-image: -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-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); background-image: linear-gradient(white 2px, transparent 2px), linear-gradient(90deg, white 2px, transparent 2px), linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px); -pie-background: linear-gradient(white 2px, transparent 2px) -2px -2px / 100px, linear-gradient(90deg, white 2px, transparent 2px) -2px -2px / 100px, linear-gradient(rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, linear-gradient(90deg, rgba(255,255,255,.3) 1px, transparent 1px) -1px -1px / 20px, #269; behavior: url(/pie/PIE.htc); -
Cicada stripes
Created by Randy Merrill (source)
CSS Code:
background-color: #026873; background-size: 13px 13px, 29px 29px, 37px 37px, 53px 53px; background-image: -webkit-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -webkit-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -webkit-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); background-image: -moz-linear-gradient(0, rgba(255,255,255,.07) 50%, transparent 50%), -moz-linear-gradient(0, rgba(255,255,255,.13) 50%, transparent 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.17) 50%), -moz-linear-gradient(0, transparent 50%, rgba(255,255,255,.19) 50%); background-image: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%), linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%), linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%); -pie-background: linear-gradient(90deg, rgba(255,255,255,.07) 50%, transparent 50%) 0 0 / 13px, linear-gradient(90deg, rgba(255,255,255,.13) 50%, transparent 50%) 0 0 / 29px, linear-gradient(90deg, transparent 50%, rgba(255,255,255,.17) 50%) 0 0 / 37px, linear-gradient(90deg, transparent 50%, rgba(255,255,255,.19) 50%) 0 0 / 53px, #026873; behavior: url(/pie/PIE.htc);