CSS Gradients Demo 3

13th October 2005 · Last updated: 21st December 2023


I've created a new demo based on my original two — now you can reposition the box the gradient lies in, and also control the height and the width. It may not sound like much, but this is the next stage on the way to creating something altogether more stunning. Stay tuned for that later.

CSS Gradients Demo 3

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

CSS Gradients Demo 3 PHP (Text File)

Comments (9)

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

  1. Dylan:
    Very nice. Whether it's pure mania or unadulterated genius, these demos of yours are very interesting uses of the technologies you employ. This gradient demo, while fairly simple and possibly done before to a certain extent, is certainly a very elegant and well crafted idea which could be a prelude to something more important(as you mentioned).

    This third refinement with the option bar across the top and a constrained gradient box is a logical evolution (I miss the random option though).

    I certainly didn't think to create something like this, and just for that fact it's worth your time to make these demos and display them for everyone to see and use. Then people can learn from them and hopefully even expand upon them to develop something even more useful and intriguing than the originals. This is really the root of and reason for the existance of the web, the exchange and refinement of information and techniques.

    Great demo, keep them coming!

    Posted on 16 October 2005 at 9:32 pm
  2. pearson wallace-hoyt:
    thank you very much for sharing. you are very talented and posting these examples is in the free spirit of the internet. have peace,


    Posted on 17 November 2005 at 8:25 pm
  3. -TomJ-:
    I am astonished about the way you control the web page, using css. I would like to work on one of your examples.

    Your Demo3 fades from top to bottom.
    Could you indicate what to modify, to make the colours fade from left to right?

    Posted on 19 December 2005 at 9:15 pm
  4. Chris Hester:
    In theory it should be simple, but I had a go now and couldn't get it to work, as the code is built to fade from top to bottom. The reason is that each line is just another div. So what you will have to do is make each div the maximum height of the box, then position them one after another (going left to right) until the given width is reached.

    Feel free to experiment with the code and see what you can come up with. Sorry I can't be more helpful, but it's a while since I worked on this demo. Let me know if you get it to work like you want.

    Posted on 20 December 2005 at 8:43 pm
  5. Stu Nicholls:
    You mention that you have tried getting the gradient to fade
    from left to right without any success.
    I have had a quick go at it and have found the answer is to float the divs and give the absolute positioned container a height and width value equal to the height and width of the gradient.
    The divs have a width of 1px and a height = $high

    I have posted the working page here


    Hope this is of some help,
    Best wishes and a Happy Christmas

    Posted on 24 December 2005 at 10:54 pm
  6. Rob Epple:
    I have been searching for a way using CSS to generate a circular gradient without using an image(say from white in the center to orange on the outside) for a wordpress/CMS site I am making for a school. However, I am not much of a coder - would this be possible?

    Rob E.

    Posted on 13 February 2006 at 3:20 pm
  7. Chris Hester:
    In theory, yes. You would need a maths routine to generate the circle. Alas maths is not my strong point, so I cannot help there.

    I have seen a site that generates circles and other shapes in CSS, but they were thin outlines, not filled shapes. I don't think I have the link anymore, but it was very impressive! If I find it again I'll post the link here.

    It may be easier to use a simple gradient in SVG, assuming it can do circular graidents?

    Posted on 13 February 2006 at 3:45 pm
  8. Chris Hester:
    Hey take a look at this! (In Firefox 1.5 or Opera 9.)


    Could be what you need.

    Posted on 13 February 2006 at 3:54 pm
  9. Chris Hester:
    Working SVG demo:

    <?xml version="1.0" standalone="no"?>
    <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
    <svg width="20cm" height="20cm" viewBox="0 0 1200 400"
    xmlns="http://www.w3.org/2000/svg" version="1.1">
    <desc>Example gradient circle</desc>
    <radialGradient id="MyGradient" gradientUnits="userSpaceOnUse" cx="400" cy="200" r="300" fx="400" fy="200">
    <stop offset="0%" stop-color="white" />
    <stop offset="50%" stop-color="orange" />
    <circle cx="400" cy="200" r="100" fill="url(#MyGradient)" />

    Posted on 13 February 2006 at 5:00 pm