CSS gradient direction for only one section

Question

I have a css gradient that looks like this

And the code i used for this is as follows

background: rgb(2,0,36);
background: linear-gradient(90deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

As you can see left 50% is consist of single color and the right 50% has a gradient from left to right. I want to make that right gradient flows from bottom to top. How can i do this?

Answer 1

By default gradients are applied top to bottom, in your class you have attributed a 90deg rotation to gradient, which by modifying the degree to 180 it results in bottom to top gradient.

background: rgb(2,0,36);
background: linear-gradient(180deg, rgba(2,0,36,1) 0%, rgba(243,249,252,1) 0%, rgba(243,249,252,1) 50%, rgba(231,244,249,1) 50%, rgba(255,255,255,1) 100%);

Refer to Here for more info

Answer 2

for this you have to use pseudo selector for this type of requirement its works perfectly for you. as per your requirement it is not possible that you want vertical gradient and first 50% of width is a normal color for this we apply gradient to the full width of your page and then cover left 50% width using pseudo selector :before for more understanding follow the snippet code.

 .bg_container { position: relative; background: rgb(2,0,36); background: linear-gradient(0deg, rgba(231,244,249,1) 0%, rgba(255,255,255,1) 100%); }.bg_container:before { position: absolute; top: 0; bottom: 0; left: 0; right: 50%; background: rgba(243,249,252,1); z-index: 0; content: ""; }.page_content{ position: relative; }

 <div class="bg_container" style="height: 400px;"> <div class="page_content"> hiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiiii </div> </div>

apply height to the div is just for example its depends on your page content.

I hope this code is helpful for you.

Thank You...

Answer 3

I tried 2 methods, which suits you best you can use.

 #grad1 { background: linear-gradient(90deg, red 50%, transparent 50%), linear-gradient(0deg, red 30%, blue 70%); position: relative; z-index: 0; padding: 15px; } /*********************/ #grad2 { position: relative; z-index: 0; padding: 15px; } p { color: white; } #grad2:before { content: ""; background: linear-gradient(0deg, red 30%, blue 70%); position: absolute; top: 0; right: 0; width: 50%; height: 100%; z-index: -1; } #grad2:after { content: ""; background: linear-gradient(90deg, red 30%, green 70%); position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: -1; }

 <div id="grad1"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div> <br> <br> <div id="grad2"> <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</p> </div>

Thank you !

Answer 4

You need to consider multiple background layer where you make the top one (the one color layer) take only 50% of the width and place it on the left:

 html { height:100%; background: linear-gradient(rgba(243,249,252,1),rgba(243,249,252,1)) left/50% 100%, linear-gradient(to top, rgba(231,244,249,1), rgba(255,255,255,1) ); background-repeat:no-repeat; }