body{
  padding: 50px;
}

h1{
  font-size: 100px;
  position: relative;
  display: inline-block;
  white-space: nowrap;
  
  span{
    mix-blend-mode: multiply;
    transition: 500ms;
    position: absolute;
  }

  .c2{
    position: relative;
    z-index: 2;
  }
}

h1:hover{
  cursor: default;
  .c1, .c2, .c3{
    top: 0 !important;
    left: 0 !important;
    filter: blur(0) !important;
  }
}

intensity = 40; // 0 to 255, lower numbers more intense
blur = 0; // px
offsetX = 15; // px
offsetY = 15; // px

$('.rgb-split').each(function(){
  
  $this = $(this);
  text = $this.text();

  $this.html('<span class="c1">'+text+'</span><span class="c2">'+text+'</span><span class="c3">'+text+'</span>');
  
  $('.c1',$this).css({
    'color': 'rgb('+intensity+',255,255)',
    'top': -offsetY+'px',
    'left': -offsetX+'px',
    'filter': 'blur('+blur+'px)'
  });
  
  $('.c2',$this).css({
    'color':'rgb(255,'+intensity+',255)',
    'filter': 'blur('+blur+'px)'
  });
  
  $('.c3',$this).css({
    'color': 'rgb(255,255,'+intensity+')',
    'top': offsetY+'px',
    'left': offsetX+'px',
    'filter': 'blur('+blur+'px)'
  });
  
});