MJC SEO & Web Development Blog > Pure CSS3 Rainbow Background

Pure CSS3 Rainbow Background

-moz-repeating-linear-gradient Example

Quick Post to show off something I wrote a few weeks ago, a CSS3 rainbow background for Firefox with the -moz-repeating-linear-gradient() property.

background:-moz-repeating-linear-gradient(45deg,
purple 20px,
indigo 60px,
blue 110px,
green 160px,
yellow 200px,
orange 240px,
red 290px,
purple 320px)

Here it is applied to a div:

It would be possible to code this for Webkit browsers too, but the current Webkit syntax for gradients is so painful I’ll have to leave that for an update.

Update: 28th November

I have written some code for Webkit browsers, but I’m not sure if the Webkit system allows repeating gradients except in purely rectangular slices.

background:-webkit-gradient(linear,
right top, left bottom,
color-stop(0.01,purple),
color-stop(0.1,indigo),
color-stop(0.2,blue),
color-stop(0.4,green),
color-stop(0.5,yellow),
color-stop(0.7,orange),
color-stop(0.8,red),
color-stop(0.99,purple));

-webkit-background-size: 20% 100%;

One wonders if the CSS guys at Apple were high on cough syrup when they came up with this syntax. Anyway, in Chrome it looks like this:

With a diagonally aligned gradient, there’s no way for it to smoothly repeat.

For those of you who are using a Webkit Browser anyway, this is what the repeating gradient looks like in Firefox:

So it appears that for the moment, this is one true area of incompatibility in CSS3 between competing standards – unless I have missed a trick with the code!

6 Comments

  1. malikGee
    Posted September 13, 2012 at 7:08 pm | Permalink

    very nice……..

  2. Mario
    Posted January 31, 2013 at 9:56 am | Permalink

    How can I make this background less visible, I mean like I use opacity?

  3. Mario
    Posted January 31, 2013 at 10:18 am | Permalink

    I find one method :D

    background:-webkit-gradient(linear,
    right top, left bottom,
    color-stop(0.01, rgba(128,0,128, 0.4) ), /*purple 800080*/
    color-stop(0.1, rgba(75,0,130, 0.4) ), /*indigo 4B0082*/
    color-stop(0.2, rgba(0,0,255, 0.4) ), /*blue 0000FF*/
    color-stop(0.4, rgba(0,255,0, 0.4) ), /*green 00FF00*/
    color-stop(0.5, rgba(255,255,0, 0.4) ), /*yellow FFFF00*/
    color-stop(0.7, rgba(255,165,0, 0.4) ), /*orange FFA500*/
    color-stop(0.8, rgba(255,0,0, 0.4) ), /*red FF0000*/
    color-stop(0.99, rgba(128,0,128, 0.4) )); /*purple 800080*/

    -webkit-background-size: 20% 100%;

  4. Miles Carter
    Posted January 31, 2013 at 10:52 pm | Permalink

    Hi Mario, nice work, yes rgba colours is the way to do it.

  5. Posted April 23, 2014 at 9:54 pm | Permalink

    Pretty cool, but instead of:

    color-stop(0.01,purple),

    color-stop(0.99,purple)

    you can write:

    from(purple),

    to(purple)

  6. Miles Carter
    Posted July 14, 2014 at 12:08 am | Permalink

    Hi Randy, this article is fairly old but sure, that’s now the correct way to do it. I actually prefer the -moz- style syntax still but it’s not what the W3C decided upon. I should add a note that explains it’s now out of date

One Trackback

  1. By sidebar_htmlpreview - Wordpress 201 on December 1, 2010 at 9:16 am

    [...] Pure CSS3 Rainbow Background -moz-repeating-linear-gradient … [...]

Post a Comment

Your email is never shared. Required fields are marked *

*
*