CodePen

HTML

            
              #Rainbow Border
            
          
!

CSS

            
              @font-face {
    font-family: 'ArvilSansRegular';
    src: url('http://timteeling.com/dev/tt3/fonts/arvil_sans-webfont.eot');
    src: url('http://timteeling.com/dev/tt3/fonts/arvil_sans-webfont.eot?#iefix') format('embedded-opentype'),
         url('http://timteeling.com/dev/tt3/fonts/arvil_sans-webfont.woff') format('woff'),
         url('http://timteeling.com/dev/tt3/fonts/arvil_sans-webfont.ttf') format('truetype'),
         url('http://timteeling.com/dev/tt3/fonts/arvil_sans-webfont.svg#ArvilSansRegular') format('svg');
    font-weight: normal;
    font-style: normal;
}

body { background: #eee; }

h1 {
  margin: 30px auto;
  text-align: center;
  width: 750px;
  color: #222;
  font-size: 10em;
  font-family: 'ArvilSansRegular', sans-serif;
  font-weight: normal;
	background-image: -webkit-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
	background-image: -moz-linear-gradient(0deg, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
	background-image: linear-gradient(to right, hsla(175,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 16.666667%, hsla(150,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 33.333333%, hsla(75,70%,40%,1) 50%, hsla(25,70%,40%,1) 50%, hsla(25,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 66.666667%, hsla(10,70%,40%,1) 83.333333%, hsla(300,70%,40%,1) 83.333333%);
	-webkit-background-size: 100% 5px;
	-moz-background-size: 100% 5px;
	background-size: 100% 10px;
	background-repeat: no-repeat;
	background-position-y: bottom;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................