Gradient Columns

The CSS3 gradient background can be used to create solid columns of color. This can be used to solve the problem of the different colors not extending to the bottom when the columns are of different heights. If you put a background color on each column, the shorter column’s color only extends to the bottom of it’s container (see first example in demo.) If you use a gradient background on the container of both columns, you will not need to worry about varying heights (see second example in demo.)

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.

See the Pen Gradient Columns by Lisa (@lisa_c) on CodePen.


The first line of code on .container2 is a fall back for browsers that don’t support gradients. See Internet Explorer section below for more explanation.

You can add color stops to your gradients by saying where the colors end. You can specify this place using percentages or by giving a length in pixels. The trick to getting solid colors with a gradient background is to specify a color stop of the first color at the same spot as the next color’s stop.

background-image: linear-gradient(left, #8aec14 60%, #528d0c 60%, #528d0c 100%);

Notice how they are both at 60%. So the first color goes from 0-60%, and the second color goes from 60% to 100% because the color value of both are the same. It is not a true “gradient” where the color changes from one color to another.

Internet Explorer

This trick does not work on IE9 and below.

The solution for making this work in IE is to use one of the old ways of handling multiple columns of different backgrounds. There are several solutions, but I have always used a background image. If you create a small background image slice to be used on the container of the columns, as shown below, you can repeat it along the y-axis.
background: #color url(bg.jpg) repeat-y;

However, this solution does not work for fluid layouts, which the example I am providing above is. Your image is a fixed width and so this works on fixed width layout only. If you want to serve up a different page for early IE that will work for you.

Personally, I would just use one background color for old IE or allow the columns to not be the same height. I think either solution is acceptable for a small percentage of users.

Leave a Reply

Your email address will not be published. Required fields are marked *