Jump to content
Sign in to follow this  
newcoder1010

How to apply gradient color

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!

 

Share this post


Link to post
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;

 

Share this post


Link to post
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;
}

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
Sign in to follow this  

×
×
  • Create New...