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