Linear gradient

  • fpi2015 · Member ·

    Hey guys I want to apply linear gradient to my background. I’ve tried the code of linear gradients generators but it doesn’t work… please if someone could give me a solution!!!!!!

    Thanks

    The blog I need help with is: (visible only to logged in users)

  • thesacredpath · Member ·

    What browser were you looking at it in after you set the gradient? Can you post the code you used here so we can take a look at it?

  • fpi2015 · Member ·

    #page
    {
    -webkit-gradient(linear, 0% 0%, 0% 100%, from(#BFE8B7), to(#0A3005), color-stop(.6,#1F3320));
    }

    This is the coding that an online linear gradient generator is giving me… I’m trying to see it in Google Crome and Safari

  • thesacredpath · Member ·

    Each browser has their own way of doing gradients, and you have to include all of those different declarations (7 unique) otherwise those other browsers will not render the gradient. Go here and use their online gradient generator and it will generate the code for all browsers.

    http://www.colorzilla.com/gradient-editor/

  • fpi2015 · Member ·

    Hey I tried to use your advice and is not working… I have no idea why… I don’t know if Css in WordPress has some restrictions or what.. anyway..

    The div is Page so this is my code

    #page {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(top, #1e5799 0%, #3aff72 50%, #f7f7f7 64%, #7db9e8 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(50%,#3aff72), color-stop(64%,#f7f7f7), color-stop(100%,#7db9e8)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* Opera11.10+ */
    background: -ms-linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* IE10+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=’#1e5799′, endColorstr=’#7db9e8′,GradientType=0 ); /* IE6-9 */
    background: linear-gradient(top, #1e5799 0%,#3aff72 50%,#f7f7f7 64%,#7db9e8 100%); /* W3C */
    }

    But nothing happens… Have you put a color degradation as a background in wordpress???

    Thanks in advance!!

  • fpi2015 · Member ·

    and when I save the stylesheet all the coding disappear and this is what is left:

    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=’#1e5799′,endColorstr=’#7db9e8′,GradientType=0);
    background:linear-gradient(top,#1e57990%,#3aff7250%,#f7f7f764%,#7db9e8100%);

  • fpi2015 · Member ·

    Please I’m going nuts!!!!! Someone help me… I’m using the Toolbox theme… and the address of the site is http://coinfooservices.wordpress.com

    I know I have the selector right, because when I put a background color it works actually now is yellow…. but when I try to put the coding for the linear gradient nothing happens…. PLEASE!!!! I”M ABOUT TO GRAB THE COMPUTER AND DESTROY IT!!!!

  • thesacredpath · Member ·

    Apparently wordpress has gone all CSS3 only and is not supporting the moz and webkit linear gradient declaration. I’m not sure what to tell you. I can’t even get Firebug in Firefox to recognize linear gradient or even the -moz. It just strips it out as well.

    Create a gradient image about 5 px wide and use a background declaration and set it to repeat in the “X” direction is my only other suggestion.

  • fpi2015 · Member ·

    Thanks for your time man…. I’ll try your solution…. you are a good man!

  • thesacredpath · Member ·

    You are welcome and sorry we could not get the gradient working. I’ve tested it before here and it worked. In fact there are some themes here that use it.

  • The topic ‘Linear gradient’ is closed to new replies.