Using JavaScript to edit CSS gradient

javascript css firefox browser linear-gradients

69,529

Start with something like the following:

var dom = document.getElementById('mainHolder');
dom.style.backgroundImage = '-moz-linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

If you need to support more browsers than Firefox, this will need to be done in combination with either browser-sniffing or some Modernizr-like feature detection.

Below is an example of how this can be done, using feature-detection similar to Modernizr (tested in Firefox, Chrome, Safari, Opera).

// Detect which browser prefix to use for the specified CSS value
// (e.g., background-image: -moz-linear-gradient(...);
//        background-image:   -o-linear-gradient(...); etc).
//

function getCssValuePrefix()
{
    var rtrnVal = '';//default to standard syntax
    var prefixes = ['-o-', '-ms-', '-moz-', '-webkit-'];

    // Create a temporary DOM object for testing
    var dom = document.createElement('div');

    for (var i = 0; i < prefixes.length; i++)
    {
        // Attempt to set the style
        dom.style.background = prefixes[i] + 'linear-gradient(#000000, #ffffff)';

        // Detect if the style was successfully set
        if (dom.style.background)
        {
            rtrnVal = prefixes[i];
        }
    }

    dom = null;
    delete dom;

    return rtrnVal;
}

// Setting the gradient with the proper prefix
dom.style.backgroundImage = getCssValuePrefix() + 'linear-gradient('
        + orientation + ', ' + colorOne + ', ' + colorTwo + ')';

69,529

onTheInternet

Updated on July 09, 2022

Comments

onTheInternet almost 2 years

I am working on editing CSS gradients through JavaScript in Firefox. I have input boxes where the user can put 1. Orientation 2. 1st Color 3. 2nd Color

Here is the html

<html>
    <head>
        <title>Linear Gradient Control</title>
        <script>
            function renderButton(){ 
            var orientation = document.getElementById("firstValue").value;
            var colorOne = document.getElementById("firstColor").value;
            var colorTwo = document.getElementById("secondColor").value;
            //alert(orientation);
            //alert(colorOne);
            //alert(colorTwo);

            };
        </script>
        <style>
            #mainHolder
            {
            width:500px;
            background: -moz-linear-gradient(left,  green,  red);

            }
        </style>
    </head>
    <body>
        <h1>Gradient Editor</h1>
        <form>
            <input type="text" id="firstValue">orientation</input><br />
            <input type="text" id="firstColor">first color</input><br />
            <input type="text" id="secondColor">second color</input><br />
        </form>
        <button type="button" onclick="renderButton()">Render</button>
        <div id="mainHolder">Content</div>
    </body>
</html>

So to recap, the user will specify their 3 values, which get passed to the function 'renderButton();'. What line can I use to change the 3 values of the CSS3 gradient so that the user can make their own custom gradient boxes? I'm assuming its only a line or two that I will need.

P.S. I realize this example only works in Firefox. I just want to get the concept down before working on different browsers.

Matt Coughlin over 11 years

@user2070478: I added an example of how to support different browsers. Note that IE9 and earlier don't support gradients. Also, there's a different syntax for early versions of webkit that this doesn't cover.
onTheInternet over 11 years

You answered my question two days ago but i will still upvote this answer as well. Thank you!
WebWanderer about 9 years

This test will never pass for native syntax. I would suggest setting a variable as a "return value" and setting it to the first "successfully set" prefix instead of returning it that way you can clean up the div you created and destroy it. Initialize the return variable to "" so that the native syntax is used by default.
WebWanderer about 9 years

Originally, this also would have set an invalid CSS property. My edits should correct these errors with as little code altering as possible. Great post! I hadn't thought about handling this this way.
WebWanderer about 9 years

Yea, I still can't get this to work, but I tried to fix it. Still a cool attempt though.
Boontawee Home over 8 years

I would add break; inside the for loop if (dom.style.background) { rtrnVal = prefixes[i]; break; }
Boontawee Home over 8 years

var prefixes = ['', '-webkit-', '-khtml-', '-moz-', '-ms-', '-o-'];