How to Make Text Color Gradient Using CSS Only
How to Make Text Color Gradient Using CSS Only - Provides color gradation not only in the background, but can also be applied to text with CSS techniques only. So with this we do not need to use images to display text with color gradations.
So by using only CSS then it will not burden loading blog rather than using images that can certainly add to the loading on the blog. CSS gradation techniques of this color can we apply to the blog title, post title, or on other text to appear different from other text.
Text with gradation color we can use on the blog title, post title, h1, h2, h3, h4, h5, or h6 tags or in other text that we want to make appear different with other text so that this text becomes more colorful.
For example, we can see in the picture below.
To create such, please use the following CSS code:
Please replace the background I marked above in accordance with the desired gradation.
Then add the "gradient-text" class code to the tag you want to create gradation, for example like the code below.
To change the background with the color gradation we want please use the following color gradation tool: http://www.colorzilla.com/gradient-editor/
Easy not to Create Text Color Grading Only Using CSS, so we can easily to try it. Hope can be useful and useful for us, good luck.
So by using only CSS then it will not burden loading blog rather than using images that can certainly add to the loading on the blog. CSS gradation techniques of this color can we apply to the blog title, post title, or on other text to appear different from other text.
Text with gradation color we can use on the blog title, post title, h1, h2, h3, h4, h5, or h6 tags or in other text that we want to make appear different with other text so that this text becomes more colorful.
For example, we can see in the picture below.
To create such, please use the following CSS code:
.gradient-text{
background:#00626b;
background:-moz-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:-webkit-linear-gradient(left,#00626b 0,#61c419 50%,#00f7ca 100%);
background:linear-gradient(to right,#00626b 0,#61c419 50%,#00f7ca 100%);
filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00626b', endColorstr='#00f7ca', GradientType=1 );
background-clip:text;
-webkit-background-clip:text;
text-fill-color:transparent;
-webkit-text-fill-color:transparent;
}
Please replace the background I marked above in accordance with the desired gradation.
Then add the "gradient-text" class code to the tag you want to create gradation, for example like the code below.
<h3 class="gradient-text">Gradient text</h3>
To change the background with the color gradation we want please use the following color gradation tool: http://www.colorzilla.com/gradient-editor/
Easy not to Create Text Color Grading Only Using CSS, so we can easily to try it. Hope can be useful and useful for us, good luck.
Post a Comment for "How to Make Text Color Gradient Using CSS Only"
Provide comments relevant to the posted articles and provide critiques and suggestions for the progress of the blog