Filter Experiment

HTML
<div class='bg'></div>
SCSS
body { margin:0; } .bg { background: url('http://i.imgur.com/pWNgnmO.jpg'), linear-gradient(233deg, #e56420, #c22525, #3d9c31, #37bbde); width: 100%; height: 100vh; background-size: cover; background-blend-mode: hard-light; animation: hue-animate 4s linear infinite; } @keyframes hue-animate { from { -webkit-filter: hue-rotate(0); -moz-filter: hue-rotate(0); -ms-filter: hue-rotate(0); filter: hue-rotate(0); } to { -webkit-filter: hue-rotate(360deg); -moz-filter: hue-rotate(360deg); -ms-filter: hue-rotate(360deg); filter: hue-rotate(360deg); } }
JAVASCRIPT
Expand for more options Login