Rainbow color for text
.rainbowtext{ 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;
font-weight: bold; }
<p class="rainbowtext">Hello! This should have rainbow coloring.</p>
I want the text to be rainbow colored. This code works fine, but only with Safari / Chrome, in firefox the text is transparent. I have tried communicating with him without success. Any help: P?
+3
source to share
1 answer
Edit2
Found a solution on the Yoksel codepen using SVG which draws a 200x200 template with a rainbow gradient and then applied to the text as padding.
<div class="wrapper">
<svg width="350" height="25">
<defs>
<linearGradient id="rainbowGradient" x1="0" y1="0" x2="100%" y2="0%"> <!--20% spreadMethod="repeat"-->
<stop offset="0%" stop-color="crimson" /><stop offset="10%" stop-color="purple" />
<stop offset="10%" stop-color="red" /><stop offset="20%" stop-color="crimson" />
<stop offset="20%" stop-color="orangered" /><stop offset="30%" stop-color="red" />
<stop offset="30%" stop-color="orange" /><stop offset="40%" stop-color="orangered" />
<stop offset="40%" stop-color="gold" /><stop offset="50%" stop-color="orange" />
<stop offset="50%" stop-color="yellowgreen" /><stop offset="60%" stop-color="gold" />
<stop offset="60%" stop-color="green" /><stop offset="70%" stop-color="yellowgreen" />
<stop offset="70%" stop-color="steelblue" /><stop offset="80%" stop-color="skyblue" />
<stop offset="80%" stop-color="mediumpurple" /><stop offset="90%" stop-color="steelblue" />
<stop offset="90%" stop-color="purple" /><stop offset="100%" stop-color="mediumpurple" />
</linearGradient>
<pattern id="rainbow"
patternUnits="userSpaceOnUse"
width="200" height="200"
viewbox="0 0 200 200">
<rect width="200" height="200"
fill="url(#rainbowGradient)"/>
</pattern>
</defs>
<text x="0" y="50%" style="fill: url(#rainbow);">Hello! This has have rainbow coloring.</text>
</svg>
</div>
Edit
Oddly enough, I am using ff here, so I misunderstood your question.
This effect you are using is webkit exclusive, there is no firefox equivalent for -webkit-background-clip: text;
+3
source to share