Gradient text color

by

I don’t exactly know how the stop stuff works.
But I’ve got a gradient text example. Maybe this will help you out!

_you can also add more colors to the gradient if you want or just select other colors from the color generator

.rainbow2 {
  background-image: linear-gradient(to right, #E0F8F7, #585858, #fff);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}

.rainbow {
  background-image: linear-gradient(to right, #f22, #f2f, #22f, #2ff, #2f2, #ff2);
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
}
<span class="rainbow">Rainbow text</span>
<br />
<span class="rainbow2">No rainbow text</span>

More Related Contents:

  1. SVG gradient using CSS
  2. Blocky gradient effect in CSS3
  3. How can I prevent CSS gradient banding?
  4. CSS gradient checkerboard pattern
  5. Using percentage values with background-position on a linear-gradient
  6. How do I combine a background-image and CSS3 gradient on the same element?
  7. Use CSS3 transitions with gradient backgrounds
  8. How to remove the stripes that appears when using linear gradient property [duplicate]
  9. Border Gradient with Border Radius
  10. Gradient borders
  11. CSS3 Transparency + Gradient
  12. CSS3 gradient background set on body doesn’t stretch but instead repeats?
  13. CSS3 cross browser linear gradient
  14. Gradients in Internet Explorer 9
  15. How does border-image work with linear-gradient?
  16. Can you add noise to a CSS3 gradient?
  17. background image, linear gradient jagged edged result needs to be smooth edged
  18. Why does the linear-gradient disappear when I make an element position:absolute?
  19. Using CSS, can you apply a gradient mask to fade to the background over text?
  20. css text gradient
  21. Is this possible to create 2-axis 4 color gradient in css (bilinear gradient)?
  22. How to add animated gradient to an svg path?
  23. Fade image to transparent like a gradient
  24. Fixed gradient background with css
  25. Why I can see Less instead of CSS in a browser [closed]
  26. Why aren’t my grid-template-areas with ASCII art not working?
  27. is there a css hack for safari only NOT chrome?
  28. Left aligned last row in centered grid of elements
  29. CSS select first element with a certain class
  30. selector for nth nested elements

Leave a Comment