Cross browser transparent gradient using SPAN tags

Posted on 2006-05-01
Last Modified: 2008-01-09


I want a cross browser gradient bar that uses JS and CSS.

I want it to be 22 px high and 100 pix wide.  It should be red on the right and transparent on the left.

My idea is to create 100 span tags with JavaScript, each one more transparent than the one before it.

The first one should look like this:

<span height="22" width="1" style="
      opacity: 0.99;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>

And the last one like this:

<span height="22" width="1" style="
      opacity: 0.01;
      background-color: #FF0000
><img src="trans.gif" height="22" width="1"></span>

So the short script should create 100 lines.

Any ideas how to effectively do this?

Question by:hankknight
    LVL 5

    Accepted Solution

    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <script type="text/javascript">
    function pad(num)
          var str = ""+num;
          if ( str.length == 1 )
                str = "0" + str;
          return str;

    function createFade() {
          var startOp = 99;
          var endOp = 01;
          var allHtml = "";
          for ( var i=startOp; i>=endOp; i-- )
                var op = pad(i);
                var html = '<span height="22" width="1" style="width: 1px; height: 22px; filter:alpha(Opacity=' + op + '); opacity: 0.' + op + '; -moz-opacity:0.' + op + '; background-color: #FF0000;">&nbsp;</span>';
                allHtml += html;
          document.getElementById("putHere").innerHTML = allHtml;

    window.onload = createFade;

    <div id="putHere"></div>
    LVL 5

    Expert Comment

    P.S. You will need to replace '&nbsp;' with your transparent gif >> '<img src="trans.gif" height="22" width="1">'
    LVL 8

    Expert Comment

    Just a curious question... Why not just create a PNG with alpha-channel? (For IE just use the AlphaImageLoader filter. Much faster & less work to do.)
    LVL 16

    Author Comment

    Thanks, maclema.

    KennyTM, good question.  I used red as the colour in my question to simplify the answer.  However, the actual colour will be dynamically created on the fly with JavaScript.   So a PNG is not an option, unless I were to dynamically create a PNG on the fly.


    Featured Post

    Threat Intelligence Starter Resources

    Integrating threat intelligence can be challenging, and not all companies are ready. These resources can help you build awareness and prepare for defense.

    Join & Write a Comment

    Avoid defining the variables in the global scope; trying to define them in a local function scope. Because:   • Look-up is performed every time a variable is accessed.   • Variables are resolved backwards from most specific to least specific scope…
    Article by: DanRollins
    This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (, we'll extend the program by adding a depth-…
    The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
    The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

    754 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now