Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Background gradient top left and bottom right

Tags:

html

css

gradient

I have this css applied to my DIV

div#envelope{
width: 400px;
margin: 140px 23% 10px 16%;
padding:33px 0 10px 0;
border-radius:2px;
background-color: rgba(255,255,255,0.5);
background-image: -webkit-gradient(
linear,
right bottom,
left top,
color-stop(0, rgba(255, 255, 255, 0.5)),
color-stop(0.50, rgba(255, 255, 255, 0.5))
);
background-image: -o-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255,     0.5) 50%);
background-image: -moz-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -webkit-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: -ms-linear-gradient(left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
background-image: linear-gradient(to left top, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 0.5) 50%);
}

Question - I want to apply the gradient to top left and another gradient to bottom right, what is the correct syntax to achieve this?

like image 234
Danny Quinn Avatar asked Jan 09 '23 13:01

Danny Quinn


1 Answers

You want to apply a gradient towards the top-left and another towards the bottom right. You can however do this with a single gradient using 3 colors. The 0% value will be in the right bottom, the 100% value in the left top, the 50% value will be between them. Feel free to play around with the JSFiddle. Hope this answers your question.

background:
        linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;

PS: I did only use the "regular" gradient and not all cross-browser ones (you seem to be perfectly capable of that yourself).

PSII: You can always add more colors to the gradient.

like image 92
Rob Monhemius Avatar answered Jan 18 '23 11:01

Rob Monhemius