How do you add text gradient using css? - html

Question

<div class="firstname">
<p class="names">DANIEL</p>
</div>
The above is the html.
h1.method1 {
background: -webkit-linear-gradient(top, #878787, #000);
background: linear-gradient(top, #878787, #000);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;}
h1.method2 {
-webkit-mask-image: -webkit-linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));
-webkit-mask-image: linear-gradient(top, rgba(0,0,0,1), rgba(0,0,0,.5) 50%, rgba(0,0,0,1));}
The above is what i tried to do using .names selector, and the .firstname .names selector, and i tried a.names selector, I am not sure if the method doesnt work or i am using the wrong selector. But overall i just want to have the text to have a little bit of gradient to look good.

Answer 1

Use the text-shadow css property with inset at the end of the rule. This is the most cross browser way to do it. IE9 may not support it but that's it.
Use rgba color for greater control and edit the alpha channel in your browser (like firebug)

Answer 2

source: http://css-tricks.com/snippets/css/gradient-text/
This is WebKit only, but is the cleanest way to accomplish it as the text remains editable and selectable web text.
h1 {
font-size: 72px;
background: -webkit-linear-gradient(#eee, #333);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}