Jump to content

How to apply gradient color


newcoder1010
 Share

Recommended Posts

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!

 

Link to comment
Share on other sites

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;

 

Link to comment
Share on other sites

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;
}

 

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...