Only CSS: Text Slicer Gradient

1<!-- Please typing your favorite word!--><div id="ui"><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div><div class="text">HAPPY HALLOWEEN :)</div></div>