Menu
I have tried a lot for text gradient. I have found the code for safari and chrome but it is not compatible in other browsers. I want to make it work without using the background image. If u have any proper solution, kindly provide.
434
You can also easily add a gradient background to a div (or any other HTML element) without using images, using the following CSS rules. BTW, I've set the gradient to start at red and end in blue.
To add a gradient overlay to a text element, we need to set three different CSS properties to the text we want to style: background-image: <gradient> background-clip: text. text-fill-color: transparent.
To add transparency, we use the rgba() function to define the color stops. The last parameter in the rgba() function can be a value from 0 to 1, and it defines the transparency of the color: 0 indicates full transparency, 1 indicates full color (no transparency).
But gradient text can be achieved in CSS, it just requires a few extra steps. It's best to start with some big bold text. This will make the gradient more visible and the text more readable.
I found the best way to do this is to use SVG gradients, it's easy to do and doesn't require any images, below is some code that creates a simple text gradient using SVG.
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#FF6600;stop-opacity:1" />
<stop offset="100%" style="stop-coloR:#FFF000;stop-opacity:1" />
</linearGradient>
</defs>
<text fill="url(#grad1)" font-size="60" font-family="Verdana" x="50" y="100">
SVG Text Gradient</text>
</svg>You can change the x and y values to create a horizontal/vertical or diagonal gradient, you can also apply styles to it using a CSS stylesheet, all it takes is an extra line of code between the defs tags.
<link href="style.css" type="text/css" rel="stylesheet"
xmlns="http://www.w3.org/1999/xhtml"/>
This method works in the latest versions of Chrome, IE, Firefox and Safari. You can also apply radial gradients, blurs and filters, for more information go to W3 Schools.
119
<style type="text/css">
h1 {
font-family: "Myriad Pro", sans-serif;
font-size: 40px;
font-weight: normal;
}
/* --- start of magic ;-) --- */
.white-gradient {
position: relative;
}
.white-gradient:after {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#00ffffff',GradientType=0 );
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,1)), color-stop(100%, rgba(255,255,255,0)));
background: -webkit-linear-gradient(top, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%);
background: -moz-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -ms-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: -o-linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
background: linear-gradient(top, rgba(255,255,255,1) 0%, rgba(255,255,255,0) 100%);
}
/* --- end of magic ;-) --- */
</style>
<h1 class="white-gradient">Pure CSS text gradient without any graphics</h1>You can do this with jQuery plugins.
The Cufon plugin may have it too, you should check that out. It could also be done with the Raphael plugin or SVG and VML but a pure CSS cross-browser solution is hard to find.
Only for Chrome and Safari:
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), color-stop(50%, rgba(0,0,0,.5)), to(rgba(0,0,0,1)));
For the rest of the browsers you have to use some JavaScript.
6
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
