Menu
I am attempting to create a linear gradient from top to the bottom like:
Unfortunately what I get is:
The following is my HTML:
<!DOCTYPE html>
<html>
<head>
<title>Test Page</title>
<link rel="stylesheet" href="test.css">
</head>
<body>
Hi
</body>
</html>
And my CSS:
body{
background: linear-gradient(0deg, white, blue 80%) ;
}
If I do 90deg, instead of 0deg then I get this:
I need this gradient - but it should be rotated by 90deg i.e. from the top to the bottom instead of left to right. I'm curious why 0deg seems to give something similar to a repeated gradient.
I have used browsers, Firefox 21 and Chrome 27. I'd be grateful for any advice.
869
CSS Linear Gradients To create a linear gradient you must define at least two color stops. Color stops are the colors you want to render smooth transitions among. You can also set a starting point and a direction (or an angle) along with the gradient effect.
Linear gradient: It goes down/up/left/right/diagonally and makes smooth transitions of colors. To make a linear transition you first have to choose two color stops. Color stops are the color among which you want to make the transitions. You can also select a starting point and a direction(an angle) for the transition.
The secret is to lay a new element on top of the original element, with opacity of the new element set to 0. Then upon hovering, transition the new element opacity to 1. This way you can have the gradient on the invisible element, and it will “magically” appear when hovered over.
CSS gradients allow us to display smooth transitions between two or more colours. They can be added on top of the background image by simply combining the background-image URL and gradient properties.
Try setting the background on the <html> instead - may be easier to manage. Then give it a height:100%; as well so it for sure extends the whole page.
I also set it to no-repeat so you only get one gradient instead of it starting over at the bottom when you have longer content.
html{
height:100%;
background: linear-gradient(0deg, white, blue 80%) no-repeat;
}
http://jsfiddle.net/daCrosby/nEQeZ/1/
Edit
fr13d pointed out in the comments, when putting the gradient on html the gradient will stop on the bottom of the first page, prior to any scrolling. That is, the gradient gets cut off when you scroll (noticeable if the background color is different than the gradient's lower color).
One way around this is to put the styling on body instead:
body{
height:100%;
background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}
http://jsfiddle.net/daCrosby/nEQeZ/117/
99
I agree with the solution from @DACrosby, but recommend to extend the background with 'fixed'. In that case your background will stay in place and you will have the gradient for the whole site not just on the top.
background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
