<div class="text-gradation">
  <span>WEB DESIGN</span>
</div>
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap');

.text-gradation{
  display:inline-block;
  background: #000;
  padding: 50px;
  font-family: 'Noto Sans JP', sans-serif;
  font-weight: 900;
  font-size: 60px;
  
}
.text-gradation span{
  display: block;
  background: linear-gradient(-45deg, #f44336, #03a9f4);
  background-clip: text;
  -webkit-background-clip: text;
  color: rgba(0,0,0,0);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.