[RESOLVED]text in multi color formating in html

CSS, HTML, Image, Web Forms, , ,

here i try to create text in multi color.. as we write text in yellow , red or in one color but here i want to multi color in text

like this

so i create this one
code is

    <br><br><b>Host Event Sponsor<b>

any help please?

You can use the below css to create a multi color text.

<style>
   .multicolortext {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
  </style>

Note that you need to wrap you text content in a span and then assign the css class to your span

 <br><br><b><span class="multicolortext">Host Event Sponsor</span><b>

Complete Code:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
 <style>
   .multicolortext {
  background-image: -webkit-gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  background-image: gradient( linear, left top, right top, color-stop(0, #f22), color-stop(0.15, #f2f), color-stop(0.3, #22f), color-stop(0.45, #2ff), color-stop(0.6, #2f2),color-stop(0.75, #2f2), color-stop(0.9, #ff2), color-stop(1, #f22) );
  color:transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
  </style>
</head>
<body>
  <br><br><b><span class="multicolortext">Host Event Sponsor</span><b> 
</body>
</html>

You can check this link for other options SourceURL

Leave a Reply