Linear gradient CSS

Question

In a help of you all. I am not new to CSS but new to this problem. I really wanted to use CSS gradient property. But the way I need is that I need to set the gradient from bottom to top and right to left. Simply like scroll bars, in page right and bottom. I have created bottom to top one class and right to left one class. Simpe CSS concept it overwrites with the latest style.

How can I tackle this situation. The way I tried is as below:

.bottom_to_top{background: -webkit-linear-gradient(center top, #FFFFFF 95%, #80868E 100%);}
.right_to_left{-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);}

I have called these two classes but simply one is overwritten by another. How can I tackle this situation. No Browser compatibility (Only for Chrome). No need the image usage also.

Giona · Accepted Answer · 2012-10-15 10:51:41Z

2

To display both gradients you need a semi-trasparency on the top one.

Demo

CSS:

.bottom_to_top{
    background: -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background: -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}
.right_to_left{
    background-image: -webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E));
    background-image: -webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%);
}

Notice that .right_to_left uses rgba instead of hex. Adjust it to your needings (you can use a simple online generator like visualcsstools).

Also, for complete Chrome support you need the double declaration (Chrome<10)

Using a single div, with multiple bgs:

Demo

.gradients{
    background:-webkit-gradient(linear, left center, right center, color-stop(0%, rgba(255, 255, 255, 0.2)), color-stop(95%, rgba(255, 255, 255, 0.5)), color-stop(100%, #80868E)), -webkit-gradient(linear, center top, center bottom, color-stop(95%, #FFFFFF), color-stop(100%, #80868E));
    background:-webkit-linear-gradient(left, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0.5) 95%, #80868E 100%),  -webkit-linear-gradient(top, #FFFFFF 95%, #80868E 100%);
}

As you can see the first declaration in the one in front, while the second one is the background.

edited Oct 15, 2012 at 10:51

answered Oct 15, 2012 at 10:12

Giona

21.2k5 gold badges60 silver badges68 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Faizul Hasan Over a year ago

Hi.. this is really awesome.. working really fine.. May be stupid question I am going to ask.. is it difficult to apply both classes to only one div element? Do we really need to use two div elements??

Faizul Hasan Over a year ago

thanks mate.. this is what I need.. really nice.. I almost spoiled more than 5 hours to find solutions.. :(... thanks to save my time mate..

user1537415 · Accepted Answer · 2012-10-15 09:57:21Z

1

Your problem is that your actually only using -webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%); as you should use

-webkit-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-o-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);
-moz-linear-gradient(center left,#FFFFFF 95%, #80868E 100%);

IE is tricky with gradients, you must use filter

answered Oct 15, 2012 at 9:57

user1537415

2 Comments

Faizul Hasan Over a year ago

mate.. you better read the question properly... I need it only for Chrome and gradient should be right to left and bottom to top at same time for the particular element I called the class.. not in angle direction.. should be perpendicular to right border of the page and bottom border of the page.. did I confused in question??

user1537415 Over a year ago

@FaizulHasan sorry, I misunderstood you, I thought that you need it browser compatible.

Collectives™ on Stack Overflow

Linear gradient CSS

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related