[CSS] Gradient Text

 

See the Pen Gradient Text by Ale (@pokecoder) on CodePen.

<h1 class="gradient">hello.</h1>

@import url('https://fonts.googleapis.com/css2?family=Pacifico&display=swap');

body {
  height: 100vh;
  width: 100vw;
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: 'Pacifico', cursive;
  font-size: 20vmin;
  background: #EDDDD4;
}
.gradient {
  background-image: linear-gradient(90deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  color: transparent;
  -webkit-background-clip: text;
  
  animation: move 1s infinite;
}

@keyframes move {
  50% {
    background-image: linear-gradient(262deg, rgba(94,114,235,1) 0%, rgba(255,145,144,1) 56%, rgba(254,193,149,1) 100%);
  }
}

 

 

참고 하기 좋은 사이트 

 

http://jlzych.com/2022/11/17/experimenting-with-layering-filtering-and-masking-in-css/