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/

Answer from DACrosby on Stack Overflow
🌐
Stack Overflow
stackoverflow.com › questions › 17179881 › css-background-linear-gradient-from-top-to-bottom
CSS Background Linear Gradient from Top to Bottom - Stack Overflow
Top answer
1 of 5
26

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/

2 of 5
4

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;
🌐
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › Reference › Values › gradient › linear-gradient
linear-gradient() - CSS - MDN Web Docs - Mozilla
The position of the gradient line's starting point. If specified, it consists of the word to and up to two keywords: one indicates the horizontal side (left or right), and the other the vertical side (top or bottom). The order of the side keywords does not matter.
Videos
19:07
🌐 YouTube
CSS Linear Gradient | CSS Gradient | linear-gradient() - YouTube
February 1, 2023
05:09
🌐 YouTube
How to Add Gradient Overlay to Image in CSS - YouTube
December 17, 2022
🌐 youtube.com
Modern CSS Gradients Tutorial — From Basics to Advanced Design ...
October 16, 2025
10:50
🌐 YouTube
How to Fade Out the Edges of Content With One Line of CSS! - YouTube
January 13, 2025
🌐 youtube.com
How to create a GRADIENT BORDER in CSS Tutorial
10:10
🌐 YouTube
Everything You Need To Know About CSS Gradients - YouTube
August 11, 2022
View all
View all
🌐
W3Schools
w3schools.com › css › tryit.asp
Linear Gradient - Top to Bottom
❯Run Code Ctrl+Alt+R Save Code Ctrl+Alt+A Change Orientation Ctrl+Alt+O Change Theme Ctrl+Alt+D Go to Spaces Ctrl+Alt+P
🌐
W3Schools
w3schools.com › css › css3_gradients.asp
CSS Gradients
A value of 90deg is equivalent to "to right". A value of 180deg is equivalent to "to bottom". ... The following example shows a linear gradient (from left to right) with the color of the rainbow and some text:
🌐
CSS-Tricks
css-tricks.com › almanac › functions › l › linear-gradient
linear-gradient() | CSS-Tricks
September 16, 2025 - By default, linear gradients go in a top-to-bottom direction (i.e., to bottom or 180deg), but we can rotate them as much as needed by setting <angle> or by using certain keywords.
🌐
freeCodeCamp
freecodecamp.org › news › css-linear-gradient-explained-with-examples
CSS Linear Gradient Explained with Examples
February 1, 2020 - Here’s a sample for a gradient starting from the top-left: background: linear-gradient(to bottom right, red, yellow);
🌐
Team Treehouse
teamtreehouse.com › community › how-to-set-bottom-to-top-on-lineargradient-2
How to set bottom to top on linear-gradient? (Example) | Treehouse Community
September 7, 2015 - this is my answer .main-header{ background-image: linear-gradient(bottom to top, steelblue 0%, darkslateblue 90%); } It says I am not setting the gradient bottom to top · style.css · /* Complete the challenge by writing CSS below */ .main-header{ background-image: linear-gradient(bottom to top, steelblue 0%, darkslateblue 90%); } index.html ·
🌐
CodePen
codepen.io › hubspot › pen › bGmKYwJ
HTML Background Color - linear gradient top to bottom
<html lang=”en”> <head> <link ... <body> <h1>Linear Gradient</h1> <p>This linear gradient starts as white at the top and transitions to orange at the bottom.</p> </body> </html>...
Find elsewhere
🌐
JetThoughts
jetthoughts.com › home › blog › how to use linear-gradient in css
How to use Linear-Gradient in CSS | JetThoughts Blog
October 15, 2025 - A value of 90deg is equivalent to right. A value of 180deg is equivalent to bottom. background-image: linear-gradient(135deg, blue, green); In this example shows a linear gradient (from top to bottom) with multiple color stops:
🌐
ColorGradient
colorgradient.dev › linear-gradient
Linear Gradient
You can optionally specify the line the gradient must follow by setting an angle or the side-or-corner argument. The simplest scenario will create a gradient of one point to another, the gradient line will go from top to bottom with the colors starting on both ends.
🌐
Quackit
quackit.com › css › functions › css_linear-gradient_function.cfm
CSS linear-gradient() Function
Linear gradients are created by establishing an axis called the gradient line. Color stops are then placed along that gradient line to create a gradient that runs between each color. You can set the angle of the gradient line so that the gradient runs along that angle.
🌐
MarkSheet
marksheet.io › css-gradients.html
CSS gradients - Free tutorial to learn HTML and CSS
But it’s quite easy to write more subtle gradients, especially for buttons: .button-grey { background-image: linear-gradient(#f2f2f2, #f2f2f2);} .button-yellow{ background-image: linear-gradient(#fce374, #fcdf5b);} .button-orange{ background-image: linear-gradient(#f58a38, #f57c20);} .button-red { background-image: linear-gradient(#ed6d64, #ed574c);} .button-purple{ background-image: linear-gradient(#847bba, #7568ba);} .button-blue { background-image: linear-gradient(#42b0e3, #2ba9e3);} .button-green { background-image: linear-gradient(#97cc76, #8bcc62);}
🌐
GeeksforGeeks
geeksforgeeks.org › css › how-to-use-linear-gradient-in-css
How to use Linear Gradient in CSS? - GeeksforGeeks
September 10, 2024 - The basic linear gradient is the most straightforward way to use the gradients in the CSS. It can involve specifying the two colors, with the browser automatically creating a smooth transition between them. The transition can occur in a straight line, typically from top to bottom, though you can control the direction by modifying the default behavior.
🌐
Tutorial Republic
tutorialrepublic.com › codelab.php
Live Demo: Example of Linear Gradients from Top to Bottom
View the live example as well as try and test it using the online HTML editor.
🌐
Stack Overflow
stackoverflow.com › questions › 26663392 › background-gradient-top-left-and-bottom-right
html - Background gradient top left and bottom right - Stack Overflow
Top answer
1 of 1
11

You want to apply a gradient towards the top-left and another towards the bottom right. You can however do this with a single gradient using 3 colors. The 0% value will be in the right bottom, the 100% value in the left top, the 50% value will be between them. Feel free to play around with the JSFiddle. Hope this answers your question.

background:
        linear-gradient(to left top, rgba(0, 255, 255, 1) 0%/*bottom-right color*/, rgba(255, 0, 255, 0.5) 50% /*middle color*/, rgba(255, 255, 0, 1) 100% /*top-left color*/),
        linear-gradient(rgba(0, 0, 0, 1), rgba(0, 0, 0, 1))/*"faked" black background make sure to add last or it will appear before the transparent/colored layer*/;

PS: I did only use the "regular" gradient and not all cross-browser ones (you seem to be perfectly capable of that yourself).

PSII: You can always add more colors to the gradient.

🌐
CSS-Tricks
css-tricks.com › css3-gradients
CSS Gradients | CSS-Tricks
January 26, 2021 - Perhaps the most common and useful type of gradient is the linear-gradient(). The gradients “axis” can go from left-to-right, top-to-bottom, or at any angle you chose.
🌐
CSS-Tricks
css-tricks.com › a-complete-guide-to-css-gradients
CSS Gradients Guide | CSS-Tricks
August 12, 2024 - A gradient going from top to bottom is again at 90deg only in the old spec from ages ago. In this new spec, to bottom is equivalent to 180deg (not 0deg, that’s equivalent to a bottom to top gradient – here’s an · interactive demo showing how a linear-gradient() works).
🌐
CSS Gradient
cssgradient.io
CSS Gradient – Generator, Maker, and Background
We’ve gathered some killer resources to help you become a gradient expert, and they’re all available for you here on our resources page. If you’re the kind of person who is always seeking more knowledge, this is the page for you.Dive deep into gradients · Gradients are CSS elements of the image data type that show a transition between two or more colors. These transitions are shown as either linear or radial.
🌐
Stack Overflow
stackoverflow.com › questions › 68095175 › how-to-gradient-an-image-from-bottom-to-top-with-css
shadow - How to gradient an image from bottom to top with css? - Stack Overflow
Top answer
1 of 1
7

It is not blur, it is linear gradient from black to transparent. You can use some element or pseudoelement (after/before) to place it over image and give it linear-gradient.
Something like this:

Copy.my-cool-item {
   position: relative;
   display: inline-block;
}

.my-cool-item:after {
   content: '';
   position: absolute;
   bottom: 0;
   left: 0;
   right: 0;
   height: 300px;
   background: linear-gradient(180deg, rgba(0,0,0,0), black);
}
Copy<div class="my-cool-item">
  <img src="https://i.sstatic.net/IuWLZ.jpg"/>
</div>
Run code snippetEdit code snippet Hide Results Copy to answer Expand

🌐
Medium
patrickbrosset.medium.com › do-you-really-understand-css-linear-gradients-631d9a895caf
Do you really know CSS linear-gradients? | by Patrick Brosset | Medium
April 10, 2015 - If the angle is omitted, it defaults to to bottom (which is 180deg or 0.5turn): ... In this picture and the following ones, the gradient box is the bordered rectangle, and the gradient line is the thick grey line that passes in the center and has the color stops displayed along. In the example above, the angle is missing, so the white-to-red gradient goes from top to bottom, which is the same as using the to bottom keyword, as shown below.
Related queries
linear-gradient generator
linear-gradient css
radial-gradient css
css gradient
linear-gradient top to bottom percentage
linear gradient color code
text gradient css
linear gradient generator