<p class="tiger">Tiger</p>
<p class="zebra">Zebra</p>
<p class="bee">Bee</p>
<p class="rainbow">Rainbow</p>
<p class="gradient">Gradient</p>

@import url("https://fonts.googleapis.com/css?family=Raleway:400,400i,700");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  font-family: Roboto, sans-serif;
  font-size: 9em;
  font-weight: 700;
  text-align: center;
  background-color: #ffc0cb;
}

p {
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
    text-shadow: 10px 9px 1px rgba(255,0,0,0.1);
}

.tiger {
  background-image: repeating-linear-gradient(
    -45deg,
    #000 2px,
    #000 5px,
    #f16e22 5px,
    #f15c22 9px
  );
}

.zebra {
  background-image: repeating-linear-gradient(
    -45deg,
    #fff 2px,
    #fff 5px,
    #000 5px,
    #000 9px
  );
}

.bee {
  background-image: repeating-linear-gradient(
    -45deg,
    #000 2px,
    #000 5px,
    #ffff00 5px,
    #ffff00 9px
  );
}

.rainbow {
  background-image: repeating-linear-gradient(
    -45deg,
    #ff0000 2px,
    #f16e22 3px,
    #ffff00 4px,
    #00ff00 5px,
    #0000ff 6px,
    #8a2be2 7px
  );
}

.gradient {
  background-image: linear-gradient(to right, #ff0000, #f16e22, #ffff00);
}