Text Effect

index.html

<h1>All things are difficult before they are easy.</h1>

<h2>Thomas Fuller</h2>

<h3>CodeMyUI.com</h3>

style.css

h1 {
  --color1: #42b883;
  --color2: #fe346e;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  font-size: 46px;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  animation: 40s linear 0s infinite move;
}

h2 {
  --color1: #ffffff;
  --color2: #42b883;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  font-size: 20px;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  animation: 40s linear 0s infinite move;
}

h3 {
  --color1: #ffffff;
  --color2: #fe346e;
  font-family: "Open Sans", sans-serif;
  text-align: center;
  font-size: 10px;
  background: repeating-linear-gradient(
    45deg,
    var(--color1),
    var(--color1) 30px,
    var(--color2) 30px,
    var(--color2) 60px
  );
  background-clip: text;
  color: transparent;
  -webkit-background-clip: text;
  animation: 40s linear 0s infinite move;
}

body{
  background-color: #fbe3b9; 
}

@keyframes move {
  from {
    background-position: 0px;
  }
  to {
    background-position: 1000px;
  }
}

text-effect.markdown

Text Effect

A Pen by Saijo George on CodePen.

License.