Gradient text color

0 votes

Is there a generator, or an easy way to generate text like this without having to define every letter

So something like this:

.rainbow {
  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;
}
<span class="rainbow">Rainbow text</span>

However, instead of using rainbow hues, create images using alternative colours (such as a white to grey or light blue gradient, for example). I can't seem to solve this easily. Any remedies?

Aug 22 in CSS by Edureka
• 11,040 points
22 views

No answer to this question. Be the first to respond.

Your answer

Your name to display (optional):
Privacy: Your email address will only be used for sending these notifications.

Related Questions In CSS

0 votes
0 answers

Looping Animation of text color change using CSS3

I have text that I want to ...READ MORE

Jun 22 in CSS by Edureka
• 11,040 points
77 views
0 votes
1 answer

How do I give text or an image a transparent background using CSS?

Use either a semi-transparent PNG or SVG ...READ MORE

answered May 27 in CSS by Edureka
• 9,540 points
51 views
0 votes
1 answer

Color names allowed in HTML/CSS

Aqua, black, blue, fuchsia, grey, green, lime, ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
24 views
0 votes
1 answer

Why is the CSS border-color inheriting the color property?

An element in CSS can have two ...READ MORE

answered Jun 10 in CSS by Edureka
• 9,540 points
50 views
0 votes
1 answer

How to insert spaces/tabs in text using HTML/CSS

For spaces, use &nbsp;, for (less than, ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
36 views
0 votes
1 answer

Change color of PNG image via CSS?

The simplest one line that worked for ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
1,015 views
0 votes
1 answer

CSS shadow white line at the end of linear-gradient background

This is a byproduct of the gradient ...READ MORE

answered Jun 1 in CSS by Edureka
• 9,540 points
493 views
0 votes
0 answers

Gradient borders

I'm trying to apply a gradient to ...READ MORE

Jul 20 in CSS by Edureka
• 11,040 points
22 views
0 votes
2 answers

Define a SQL query? What is the difference between SELECT and UPDATE Query? How do you use SQL in SAS?

HI.. SQL is Structured Query Language, which is ...READ MORE

answered Aug 8, 2020 in PHP by anonymous
5,050 views
webinar REGISTER FOR FREE WEBINAR X
REGISTER NOW
webinar_success Thank you for registering Join Edureka Meetup community for 100+ Free Webinars each month JOIN MEETUP GROUP