Question

I have this CSS linear gradient working in Firefox and can’t seem to get the same result to work in Safari and other browsers. its a paper like background for a contact field. I Have tried the whole body and a specific element and the style seems to only work in Firefox. Tried using the -webkit- and the -moz- but no luck. Any ideas?

textarea {
    background-color: #fff; 
    background-image: 
        linear-gradient(90deg, transparent 79px, #abced4 79px, #abced4 81px, transparent 81px),
        linear-gradient(#eee .1em, transparent .1em);
    background-size: 100% 1.2em;
    display: block;
    resize: none;
}

Answer 1

CSS

textarea {
    background-color: #ffffff;
    background-image: 
        -moz-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -moz-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -webkit-gradient(linear, left top, right top, color-stop(79px, rgba(0, 0, 0, 0)), color-stop(79px, #abced4), color-stop(81px, #abced4), color-stop(81px, rgba(0, 0, 0, 0))), 
        -webkit-gradient(linear, left top, left bottom, color-stop(.1em, #eeeeee), color-stop(.1em, rgba(0, 0, 0, 0)));
    background-image: 
        -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -webkit-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -o-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -o-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        -ms-linear-gradient(left, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        -ms-linear-gradient(top, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-image: 
        linear-gradient(to right, rgba(0, 0, 0, 0) 79px, #abced4 79px, #abced4 81px, rgba(0, 0, 0, 0) 81px), 
        linear-gradient(to bottom, #eeeeee .1em, rgba(0, 0, 0, 0) .1em);
    background-size: 100% 1.2em;
}

Demo

Resources

• http://www.colorzilla.com/gradient-editor/
• http://caniuse.com/css-gradients