3 Color Border Gradients

Community
1

Hello everyone.

I am trying to create a gradient, top to bottom, on only the right border of a series of divs. This is to create the illusion of a dividing line between the divs.

I’ve been researching this online and found some great ways to achieve this using two colors, but cannot find any for the use of more than two colors.

The effect I’d like to achieve is this: border goes from transparent at top, to grey in the center, to transparent at bottom.

Does anyone know some good css for this?

Thanks.
M.

2

you can simply add a third color, see this bin

also, you can add percentage to control how much percent each color is

3

Thanks for responding, stetim94. :slight_smile:

What I’m looking to do, however, is add the gradient to the border, not the background. I’ve seen some fiddles where it’s done nicely, but not using more than two colors. When I try adding a stop, the code doesn’t work.

M.

4

this seems impossible. you could make this border in a image with photoshop and then use image border?

5

Hi stetim94.

I’m sure it can be done - as I’ve seen examples with two color stops. So adding more should not be a problem. Thing is I don’t know why it isn’t working.

Here is an example of what I’ve seen:

.top-to-bottom { border-width: 3px; border-style: solid; -webkit-border-image: -webkit-gradient(linear, 0 0, 0 100%, from(black), to(rgba(0, 0, 0, 0))) 1 100%; -webkit-border-image: -webkit-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -moz-border-image: -moz-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; -o-border-image: -o-linear-gradient(black, rgba(0, 0, 0, 0)) 1 100%; border-image: linear-gradient(to bottom, black, rgba(0, 0, 0, 0)) 1 100%; }

6

but you say here, its not possible? You haven’t seen this, and neither have i

7

Well, it shouldn’t be difficult to add another color-stop. It just seems logical. But I am unsure of the syntax.

8

seems i found something

9

LOL! Thanks. I actually tried that code but it didn’t work. As well, the jsfiddle isn’t showing me the results. Oh well.