How to apply gradient color

[newcoder1010]

Hello,

I have this gradient color works just fine which applies left side of the div element. 

.gradient.left {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background: linear-gradient(90deg, rgba(52, 52, 52, 0.7) 43%, rgba(255, 255, 255, 0) 66%);
    background-image: linear-gradient(to right, rgba(16, 49, 90, 0.7), rgba(255, 255, 255, 0));
}

1. How can I modify the css to apply gradient on entire div element?

2. How can I modify the css to apply gradient on top 50% div element?

3. How can I modify the css to apply gradient on bottom 50% div element?

4. How can I modify the css to apply gradient center of the div element?

After that, I will play with that to meet my requirements. Please advise!

 

[Ingolme]

The second gradient is overwriting the first one so your first gradient is not being used.

Gradients always apply to the entire surface of an element by default. If it does not appear that way, either the transparent part of the gradient is very large or your element is not as big as you thought it was.

You can set background-repeat to "none" and then set the background-size and background position to put the gradient where you want it to go.

/* Top half */
background-size: 100% 50%;
background-position: top left;

/* Bottom half */
background-size: 100% 50%;
background-position: bottom left;

/* Left half */
background-size: 50% 100%;
background-position: top left;

/* Right half */
background-size: 50% 100%;
background-position: top right;

/* Center */
background-position: center;

 

[newcoder1010]

Thanks much!

However, this link of code is bit confusing. 

    background-image: linear-gradient(to left, rgba(10, 109, 233, 0.7), rgba(242, 235, 235, 0));

Changing from left to right and right to left makes difference. If I keep left, color gets applied right side and I keep right, color gets applied left side. How can I keep same color both sides?

Below code gives more color on the top right than the top left but I like to have the same color entire top section. Please advise. 

.gradient.left {
    display: block !important;
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-image: linear-gradient(to left, rgba(10, 109, 233, 0.7), rgba(242, 235, 235, 0));
    background-size: 100% 50%;
    background-repeat: no-repeat;
    height: 700px;
}

 

[Ingolme]

You should read the reference manual for the linear gradient to understand how it works: https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

[newcoder1010]

Thank you!