CSS Gradients Demo

5th September 2005 · Last updated: 21st December 2023
 

Comments

Until CSS gives us gradients we have to rely on background images — or do we? Here's a demo using no images whatsoever, just pure CSS. It generates a wide range of gradients based on the colours you input. There are three values that make up the start colour of the gradient (red, green and blue), and three more values to specify the gradient's end colour. The colours will then be faded between these two CSS-ready values.

You can view the source of the page and copy the code if you see a gradient you like. I've used simple CSS (generated by PHP) which could then be copied and pasted into a separate stylesheet afterwards if you want.

The demo came to me after reading Eric Meyer's post The Constants Gardener, in which he comments on a great idea by Shaun Inman to add constants to CSS. (See details of this in Shaun's post CSS Server-side Constants.) I got thinking about adding variables to CSS using PHP. (In fact I've used this technique before in some of my other CSS demos.) It's an excellent way to make CSS dynamic. I did a simple colour test, changing the value of a background from 0 to 255 in a loop and was stunned by the smoothness of the colour it generated. So I just had to take the idea further and make a whole working demo from it:

CSS Gradients Demo | CSS Gradients Demo 2 | CSS Gradients Demo 3

If you want to download and study the PHP used in the demos, here it is in text form:

CSS Gradients Demo PHP (Text File) | Demo 2 PHP Version (Text File)

Have fun playing around with the colour values you can enter. You can input any number from 0 to 255. A brief warning though: it's thrown up a few bugs in IE6 which I'll mention next. In fact, I don't recommend using that browser to view it, though it does 'work'. Note the way I coloured the form labels as well - it doesn't work in IE6 because it can't handle the CSS, but hopefully IE7 will.

Browser Bugs (For Windows XP)

Opera 8.02:

  1. It didn't want to style the form <legend>'s width or height. I solved it by using a Strict doctype. (So Opera fails to style the legend element properly in Quirks Mode.)

Firefox 1.0.6

  1. I couldn't get the button to centre. It works in Opera and IE6.
  2. The fieldset doesn't apply the right justification style, so the form inputs, labels and text aren't aligned.

Internet Explorer 6

  1. What can I say? I found no way to get the <div>s the same size as Opera and Firefox. Each <div> should be 1px high, but they appear taller. Can anyone help?
  2. IE shows the background colour of the legend outside it's actual shape. In effect the whole row is given the legend's background colour.
  3. When using a <div> 10px high while developing the demo, I got a huge gap at the top of the screen where the previous page showed through. The demo now consistently refuses to paint the whole screen properly. Often 3 large stripes of black or white appear after using the button to generate a new gradient. A timing problem? Switching to another window and back cures the missing rows of colour.
  4. I also saw stripes of random colours near the top at one point. I switched away from IE and back and they appeared from nowhere! Memory leak? Data corruption? This sure is a buggy browser!

Updates

13th October 2005:
Improved the look of each demo and added links from one to the next.
Created a third demo - see separate post!
12th October 2005:
Improved the second demo to fit a screen size of 1024 x 768.
7th September 2005:
I've created a second demo (and improved the code in the first one). This time the gradient is reflected in the shape of a diamond. You can also invert the colours, or choose random ones.

21 September 2005:
Following the advice of the comment from Marcus Dau below, the demos now work much better in IE6. (Each <div> is now the same height as the other browsers tested in.) Apologies for the extra markup bloat.

Comments (19)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Mark Tranchant:
    Hm. Well, it works, I suppose, but the code size and mess is larger than the overhead of a small tiled gradient image.

    This sort of thing might work well as an embedded JS function that adds in the requisite elements and styling on the client side. I'm sure the generator could be implemented in far less code than the output.

    I'm still not sure why you'd want to do this, though.

    Posted on 7 September 2005 at 7:34 pm
  2. Joerg Petermann:
    Hey Chris, nice and creative work.
    Your name is your program. :))

    Posted on 9 September 2005 at 5:00 pm
  3. Marcus Dau:
    Hy!

    The height for the div in IE is very easy.

    Just use this: <div id="d$j"><!– just text –></div>

    The div has to contain just a comment, then it works very well ;-)

    Greetings
    Marcus

    Posted on 13 September 2005 at 8:42 am
  4. Marcus Dau:
    The problem with the background-color:

    http://www.themaninblue.com/
    experiment/InForm/fieldset.htm

    It won't work in IE because it's, as you already said, a very buggy browser!

    Greetings
    Marcus

    Posted on 13 September 2005 at 9:05 am
  5. Jordan:
    Nicely done. Now why would want to use this? It reminds me of a script i saw a few months ago that turned jpegs into giant tables made from 1px by 1px cells to create "imageless images with html".

    Posted on 16 September 2005 at 7:42 pm
  6. Ro:
    A) This is retarded.

    B) You've already discovered that font-size is the problem with IE. Setting a small font size isn't the solution. Instead, use CSS to hide the overflow.

    Posted on 20 September 2005 at 4:03 pm
  7. Troy:
    C) This is retarded

    D) This is retarded

    Posted on 4 October 2005 at 12:21 am
  8. Thorkil:
    Can you get some inspiration from this site:
    http://web.tampabay.rr.com/bmerkey/
    examples/scalable-gradient.html

    I have for a quick test tried to modify the code slightly to:
    <style type="text/css">
    .grad {
    filter: progid:DXImageTransform.Microsoft.Gradient
    (gradientType=0,startColorStr=yellow,
    endColorStr=Green);
    width: 1010px;
    height: 400px;
    }
    </style>

    and

    <body class="grad">


    It seems to work fine in IE6, but neither in Firefox nor in Opera

    Posted on 9 October 2005 at 11:34 am
  9. Chris Hester:
    A few people don't get the idea behind this demo. It's not meant as a direct replacement for all background images. Nor a real-world example to use straight away. No, it is a *demo*. Why bother? Because it is dynamic. With simple code you can do anything you want with the gradients. Think about it.

    Comments 8 and 9 on the following link about my demo definitely get it:

    http://web-graphics.com/mtarchive/001642.php

    I've still got an idea for a real-world use of this demo. Maybe later. It's going to take a lot of work. This existing demo is just a taster…

    Posted on 12 October 2005 at 9:37 pm
  10. Emi:
    I think it's purty.

    Posted on 25 October 2005 at 10:14 pm
  11. Don Lekei:
    I see numerous comments asking (or challenging) the reasons why someone would want to do this.

    Well consider someone designing a community site, or other similar system where you want to create variations on a theme. For example, I am building a Drupal theme to create a consistent look-and-feel across a network of sites with different branding.

    The css for the "Spread FireFox" theme has the most insane hierarchy of CSS that you have ever seen, with tweaks for each node and block type and whether it is displayed on the left or right side of the screen.

    To change the color scheme took me over two hours.

    Compare that to changing a table of theme colors and having the entire theme change automatically. Hey, you could even have a color-scheme setting section in the theme control panel.

    Then anyone could theme there site in a few moments by selecting the color scheme, setting a logo and an icon and poof!

    Posted on 27 October 2005 at 9:17 pm
  12. alex surja:
    beautifully php coded.
    its very useful for integrated template system.
    if you want to learn a bit of scripting languange you know exactly the point.

    Posted on 12 November 2005 at 11:04 pm
  13. Matt A.K.A Dark Rider:
    hey i would like to use a gradient in a content box (div) on a webdesign im doing and i heard about using css for gradients instead of an image this way it would fit no mater what the size of the box was. anyways i looked at the source code on the demo one after i input my color info. anyways it looked like it needs a div for each pixel to create the gradient is there anyways to have it all in one div so i can have text over it? if so it would be nice if some one could give me the code as i just started learning css today so that i could code this template and so far it's coming along pretty good but im still not a great coder so help would be very nice.

    Posted on 5 December 2005 at 6:46 pm
  14. Chris Hester:
    Hey Matt, take a look at this:

    http://slayeroffice.com/code/gradient/

    My third demo also allows you to create a box of any size or shape and fill it with a gradient. All you need to do then is place the text in a separate DIV and add a z-index higher than the DIV with the gradients in, so the text appears on top.

    Posted on 5 December 2005 at 8:59 pm
  15. Harkatur:
    I totally appreciate that work you have put into this, and the demos. It is an inspired piece of coding combined with CSS. LAMP* could easily become 'CLAMP' on the strength of contributions such as this. Thank you.

    I am so disappointed that your detractors could find nothing constructive to add to their criticisms, but that only makes me A) want to add my few words of praise and B) ignore their juvenile postings.

    I think your work will be appreciated by the majority of genuine web developers, and for several good reasons. Some have been mentioned already, but the first one that I thought of was the enhanced economy: reduction of storage space, faster loading, reduced cache dependency. I also like that it is one less image for anyone to rip!

    Keep up the good work!

    *http://en.wikipedia.org/wiki/
    LAMP_%28software_bundle%29

    Posted on 6 December 2005 at 7:49 pm
  16. Fredkc:
    Excellent find!
    10 yrs programming in ASP on Micro$not servers, and I am now forced, kicking and screaming, to switch to PHP.

    Finding stuff like this makes it all the easier, and more inviting. Thanx,

    fredkc

    Posted on 17 December 2005 at 6:26 pm
  17. redi:
    redicolous, as silly as my misspelling

    Posted on 29 January 2006 at 12:06 am
  18. John:
    Very nice. As has been noted less delicately above, it would great to take this a step further and make it actually usable as a background with text and/or images in the foreground. Chris' example from Dec 5 looks like a great start, but the details still seem a little complicated. Maybe the next step is to write a server-side function (maybe in PHP) to generate all the required CSS & JavaScript to, say, draw a gradiated title bar using given colors and content. Package it all more neatly.

    I wonder if this technique could be combined with that of creating a flexible drop-shadow in CSS, which AFAIK, still requires use of a PNG image, to remove the dependency on the image by fading from gray to white (or other background color) in a rectangular shape.

    Fledkc: I've been enjoying learning open source tools such as PHP and mySql in my extracurricular projects for the last few years, but am being dragged kicking and screaming to .NET for my paying job! :-)

    Posted on 31 January 2006 at 4:05 pm
  19. John:
    Chris,

    I wonder how well search engine spiders can read the complicated HTML that this technique creates? I'm torn between the elegance and maintainability of this solution versus the complexity of the actual code generated.

    Posted on 31 January 2006 at 4:08 pm