Posted in fonts
3274
1:31 am, July 6, 2022
 

rainbow text with css using background clip

HTML

<div class='rainbow-text'>I should be some rainbow text!</div>

CSS

.rainbow-text {
  background-image: linear-gradient(to left, violet, indigo, blue, green, yellow, orange, red, pink, teal);
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
font-family:sans-serif;
font-size:22px;
}
I should be some rainbow text!

View Statistics
This Week
69
This Month
449
This Year
1171

No Items Found.

Add Comment
Type in a Nick Name here
 
Search Code
Search Code by entering your search text above.
Welcome

This is my test area for webdev. I keep a collection of code here, mostly for my reference. Also if i find a good link, i usually add it here and then forget about it. more...

Subscribe to weekly updates about things i have added to the site or thought interesting during the last week.

You could also follow me on twitter or not... does anyone even use twitter anymore?

If you found something useful or like my work, you can buy me a coffee here. Mmm Coffee. ☕

❤️👩‍💻🎮

🪦 2000 - 16 Oct 2022 - Boots
Random Quote
I believe that in order to better your knowledge base, it takes a lot of failing in order to succeed. I don't consider anything a failure as long as you get back up and you learn from your own mistakes.
Unknown
Random CSS Property

inset-inline

The inset-inline CSS property defines the logical start and end offsets of an element in the inline direction, which maps to physical offsets depending on the element's writing mode, directionality, and text orientation. It corresponds to the top and bottom, or right and left properties depending on the values defined for writing-mode, direction, and text-orientation.
inset-inline css reference