Creating Vertical Line With Color Gradient

Look at the vertical line on the left, pretty weird, right? This is a line to extend the content. Bla bla bla Bla bla...

---

This is an example of putting vertical line on the center, as columns divider.

You see, it's not that hard to do once you read this post.

---

We're going to use CSS3 background color gradient. This CSS method of creating gradient color won't work on Internet Explorer 8 and below. I assume you're developing your blog/site using NOT IE8-.

Alrighty then, let's take a look at the picture below, so you can decide the color for each step.
 

As you can see on the left, there are 3 steps of colors, starting from the top. Actually you can create more than 3 or less than 3, but not less than 1. The CSS3 syntax for background color gradient (with prefixes for different browsers) : background-image: -webkit-linear-gradient(top, #color1, #color2, #color3); background-image: -moz-linear-gradient(top, #color1, #color2, #color3); background-image: -ms-linear-gradient(top, #color1, #color2, #color3); background-image: -o-linear-gradient(top, #color1, #color2, #color3); background-image: linear-gradient(top, #color1, #color2, #color3);

---

Creating a class for <hr> tag (horizontal rule)
The CSS styling of the vertical line looks like this :
hr.name-of-your-vertical-line { border : 0; height : (height)px; /*your own value to suit your content*/ width : 1px; background-image: -webkit-linear-gradient(top, #color1, #color2, #color3); background-image: -moz-linear-gradient(top, #color1, #color2, #color3); background-image: -ms-linear-gradient(top, #color1, #color2, #color3); background-image: -o-linear-gradient(top, #color1, #color2, #color3); background-image: linear-gradient(top, #color1, #color2, #color3); }

Some notes :

• For the class name of the horizontal rule, name-of-your-vertical-line, freely choose your own word, so it can be easily remembered. Don't use space and any other character besides letters, numbers, dash, and underscore when you create the name. Correct example : some-thing, or some_thing, or some_1, or some1, or _1-thing, or just something, etc. The number has to be placed behind the letter or other character (such as dash or underscore) though.
• Put the proper height (in pixels) to fit your content. It has to be manually adjusted. I've tried using percentage, it won't show anything.
• To create 'fake' transparency of the top and the bottom line, you can put the #color1 and #color3 with the same color as your post background color. I suggest to use hex color codes for those (ColorPicker provides the tool).
• The width of the vertical line defines the width of the vertical line. In pixels.
• You don't have to use the border, leave it to 0. Because if you use another amount, it will act as the out-liner, like in the crime scene.

Update:
To create real transparency, you can use the word transparent as the substitute for the hex color code.

For instance, let's make a horizontal line with 3 stages of gradient. The color gradient starts from the left, so, the general syntax for the CSS declaration :

background-image: linear-gradient(left, #color1, #color2, transparent);

Example of horizontal thick line result (using transparent) keyword:

This is the CSS of that element
I'm using a div element for that, not hr — just for an example. background-image: -webkit-linear-gradient(left,#000,#aeaeae,transparent); background-image: -moz-linear-gradient(left,#000,#aeaeae,transparent); background-image: -ms-linear-gradient(left,#000,#aeaeae,transparent); background-image: -o-linear-gradient(left,#000,#aeaeae,transparent); background-image: linear-gradient(left,#000,#aeaeae,transparent); width: 500px; height: 5px;

---

Let's continue...
I suppose you already know how to put CSS in the HTML? If you're not sure, then, go to your HTML editor, find the closing </head> tag, and paste the complete CSS codes (wrapped with <style> and </style>) right above it. Then, you can "summon" the CSS styling by declaring the class on a particular HTML element. In this case, the <hr> element.

---

Positioning the vertical line on the center of two columns

I use <table> to put the vertical line as columns divider, or just to put it on the left or the right side.
The HTML elements stacking looks like this :
<table style="margin:auto;border-collapse:separate;border-spacing:10px 0"> <tbody> <tr> <td style="vertical-align:top; width:[your_value_here]px"> Content on the left column - it can be writings or images </td> <td style="vertical-align:top"> <!--This is the CSS "summoning", by declaring the CSS class on the <hr> element.--> <hr class="name-of-your-vertical-line"> </td> <td style="vertical-align:top; width:[your_value_here]px"> Content on the right column - it can be writings or images </td> </tr> </tbody> </table>

---

So, I included some inline styling in the <table> tag and some of the children elements — particularly, the <td>.
Some notes about the styling (and the elements) :

• The margin:auto will center the the table element. You can declare the width or not. If not, then the table will occupy 100% of the page's width where you put it (displayed as block element).
• The border-collapse:separate will separate the columns. Then define the spacing using border-spacing:x-value y-value.
• tbody defines the body content of the table, tr defines the row of the table, and td defines the column.
• The vertical-align:top will vertically align the column content to top. The vertical-align property value can be top, middle, bottom, or baseline.
• The width defines the width of each column, in pixels. Change the [your_value_here] with an integer (number) to fit your page.
  You don't need to declare the width of the column which has the custom styled <hr> element.

---

To put the vertical line on the left or right, you can also use the above method with minor adjustment. Put the <hr> tag in the column before the content column, for left position. Or, for right position, put <hr> after the content column.

Right then, have fun.

To find out the complete set of gradient color prefixes, or even create your own gradient, you can go to :

• ColorZilla - gradient editor
• IE - Microsoft Gradient Maker