newcoder1010 Posted March 10, 2020 Share Posted March 10, 2020 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 More sharing options...
Ingolme Posted March 10, 2020 Share Posted March 10, 2020 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 More sharing options...
newcoder1010 Posted March 11, 2020 Author Share Posted March 11, 2020 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 More sharing options...
Ingolme Posted March 11, 2020 Share Posted March 11, 2020 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 Link to comment Share on other sites More sharing options...
newcoder1010 Posted March 15, 2020 Author Share Posted March 15, 2020 Thank you! Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now