[Tutorial] Text Gradients w/ CSS3

reloadmydeagle Feb 13, 2015

  1. reloadmydeagle

    reloadmydeagle I LoVe GoldZ Lifetime Gold XPG Retired Staff
    135/188

    Joined:
    Oct 30, 2013
    Messages:
    1,608
    Likes Received:
    656
    Trophy Points:
    135
    Gender:
    Male
    Location:
    Texas
    Console:
    Xbox One
    This is just a simple snippet of text gradient code in CSS3. This can be used to make some stylish text on your page.

    h1 {
    font-size: 72px;
    background: -webkit-linear-gradient(#eee, #333);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    }

    Just add the last 3 properties of that element to whatever text you're styling. -webkit-linear-gradient(#eee, #333); is the range of the gradient, the first color being the beginning of the gradient, and the second color being the ending color of the gradient. ;)

    Limitation(s): Doesn't work when using text-shadow on the text.
    Example: http://jsfiddle.net/272n6v9p/
     

Share This Page

Close