CodePen

HTML

            
              <h1>Shift</h1>
            
          
!
via HTML Inspector

CSS

            
              html {
  background-color: hsl( 0, 65%, 45%);
  animation: shift 8s linear infinite;
  /* More color */
  /*
  background-image:
    radial-gradient(
        circle farthest-corner at 50%    0, 
        hsla(  0, 100%, 50%, 0.15),
        hsla(  0, 100%, 50%, 0.00) 65%),
    radial-gradient(
        circle farthest-corner at   0 100%, 
        hsla(120, 100%, 50%, 0.15),
        hsla(120, 100%, 50%, 0.00) 65%),
    radial-gradient(
        circle farthest-corner at 100% 100%, 
        hsla(240, 100%, 50%, 0.15),
        hsla(240, 100%, 50%, 0.00) 65%);
  /**/
}

@keyframes shift {
  $keyframes: 180;
  @for $i from 0 through $keyframes {
    #{percentage($i/$keyframes)} { background-color: hsl( ($i%$keyframes/$keyframes)*360, 85%, 45%); }
  }
}

/* There is another method… but it will affect the hue of every pixel including child elements:
 codepen.io/bennettfeely/pen/JhDGu */
@keyframes all-shift {
  to { -webkit-filter: hue-rotate(1turn); }
}
/**/

h1 {
  font: italic 3.5em/1 Impact, sans-serif;
  transform: skew(-5deg);
  display: inline-block;
  color: hsla(0, 0%, 0%, 0.25);
  text-transform: uppercase;
}

/* Center */
html,body{height:100%;}html{display:table;width:100%;}body{display:table-cell;vertical-align:middle;text-align:center;}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              /* Radial Gradient Syntax fix */

StyleFix.register(function(css, raw) {
	if (PrefixFree.functions.indexOf('radial-gradient') > -1) {
		css = css.replace(/radial-gradient\(([a-z-\s]+\s+)?at ([^,]+)(?=,)/g, function($0, shape, center){
			return 'radial-gradient(' + center + (shape? ', ' + shape : '');
		});
	}

	return css;
});
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................