how to add multiple colors in background with linear gradient?-CodePudding

I am facing one problem with gradient color. I want to add gradient to text background but I don't know how can I add multiple color.

Can anyone please explain how to do this?.

CodePudding user response：

You can 'cut out' a text from its background using background-clip (note some browsers require a -webkit- prefix) with the text 'filled' to be transparent.

The multi colored background can be provided with a linear-gradient which can have multiple colors and go from side to side or top to bottom.

.multiColor {
  font-size: 3em;
  background-image: linear-gradient(to right, magenta, cyan, lime, yellow);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  text-fill-color: transparent;
  /* position in center just for this demo */
  position: relative;
  display: inline-block;
  top: 50vh;
  left: 50vw;
  transform: translate(-50%, -50%);
}

<div class="multiColor">HELLO</div>

CodePudding user response：

h1{  
  font-size: 64px;
  background-image: linear-gradient(to right, #ba81cf, #6886d4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}