This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
Answer from Josh Mein on Stack OverflowW3Schools
w3schools.com › css › css3_gradients.asp
CSS Gradients
The CSS linear-gradient() function creates a linear gradient. A linear gradient defines a color transition that goes in a straight line, it can go down, up, to left, to right, or diagonally.
CSS Gradient
cssgradient.io
CSS Gradient – Generator, Maker, and Background
As a free CSS gradient generator tool, this website lets you create a colorful gradient background for your website, blog, or social media profile.
css - How to create a gradient background for an HTML page - Stack Overflow
I am in the process of learning HTML. What is the best way to create a gradient background for an HTML page? So far this is what I have as a background: body style="background-color:Powderblue" ... More on stackoverflow.com
html - Making gradient background fill page with css - Stack Overflow
I have this gradient background but I don't want it to repeat the way it does to fill the page, I want it to be one large gradient that fills the page. html { -webkit-background-size: cover; ... More on stackoverflow.com
html - How to have background gradient fill entire page? - Stack Overflow
I am just recently getting started with learning HTML/CSS, and I'm pretty confused as to how to make this linear gradient I have for the background fit the entire page. I've poked around, and I can't More on stackoverflow.com
Background gradient
Hi I just started learning. I am having trouble getting the body background in gradient colors. why is it in lines? but how can i make it fill the whole page? what did i miss? so the CSS for the body is body { background: linear-gradient (45deg, pink, teal); } Thank you More on forum.freecodecamp.org
1
0
May 7, 2022Videos
05:00
🔥 How to Add a Stunning Color Gradient in HTML Using CSS 🎨 ...
13:39
CSS Tutorial #48 - Color Gradients in CSS | Programming For Beginners ...
01:18
Add Gradient Color | HTML and CSS Tutorial - YouTube
How To Add HTML Gradient Background Image / CSS Gradient Tutorial ...
05:56
How to create a gradient background - Quick tutorial - YouTube
01:05
CSS Gradient Background - One Minute Coding ⏱ - YouTube
Shay Howe
learn.shayhowe.com › html-css › setting-backgrounds-and-gradients
Setting Backgrounds & Gradients - Learn to Code HTML & CSS
Learn how to add background colors, images, gradients, and combinations of the two with HTML and CSS. See whats new with CSS3 background properties and values.
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › gradient › linear-gradient
linear-gradient() - CSS - MDN Web Docs - Mozilla
The linear-gradient() CSS function creates an image consisting of a progressive transition between two or more colors along a straight line. Its result is an object of the <gradient> data type, which is a special kind of <image>. ... background: linear-gradient(217deg, rgb(255 0 0 / 0.8), ...
MDN Web Docs
developer.mozilla.org › en-US › docs › Web › CSS › CSS_images › Using_CSS_gradients
Using CSS gradients - MDN Web Docs
CSS gradients are represented by ... between three types of gradients: linear (created with the linear-gradient() function), radial (created with the radial-gradient() function), and conic (created with the conic-gradient() function)....
Top answer 1 of 5
8
This cannot be done in html but it can in css (specifically css3).
You would have to add a class to the body of your page or a div within it that surrounds all of your content. You can use a css gradient generator to get the code to put in your css class.
Here is a simple example on a div: http://jsfiddle.net/8fDte/
You can do the following as well if you want it on the body. Note you have to link to the css file that will store you styles.
HTML
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<HTML>
<HEAD>
<LINK href="PathToCss.css" rel="stylesheet" type="text/css">
</HEAD>
<BODY class="MyGradientClass">
</BODY>
</HTML>
CSS
This code can be generated by a css gradient generator like the one linked above.
.MyGradientClass
{
height:200px;
background-image: linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -o-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -moz-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -ms-linear-gradient(bottom, rgb(113,61,62) 25%, rgb(147,92,93) 63%, rgb(177,120,121) 82%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0.25, rgb(113,61,62)),
color-stop(0.63, rgb(147,92,93)),
color-stop(0.82, rgb(177,120,121))
);
}
Edit:
As Rory mentioned, CSS3 is not fully supported by all modern browsers. However, there are some tools such as PIE CSS to help IE to accept some CSS3 functionality.
2 of 5
2
It's not possible to make a gradient with HTML alone. There are new features in CSS3 which allow you to create a gradient, however these are not fully supported by all browsers.
If you'd like to read some more about CSS3 gradients, read this article
There is also a handy online tool which will create the CSS code to create a gradient of your specification, here.
Top answer 1 of 7
119
As of today, none of the above are working. The linear gradient is repeating itself.
To stretch the gradient over the entire page you have to add this in the css:
body {
background: linear-gradient(to left top, blue, red);
background-attachment: fixed; /*edit*/
}
2 of 7
66
To have the gradient fill the viewport, give the <html> element a height of 100%: fiddle
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}
To prevent the gradient from repeating past the visible section of the viewport (assuming there was a scrollbar), replace height: 100%; with min-height: 100%;.
html {
height: 100%;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background: #70bg32;
background-repeat:no-repeat;
background: -webkit-linear-gradient( to left top, blue, red);
background: -moz-linear-gradient( to left top, blue, red);
background: -ms-linear-gradient( to left top, blue, red);
background: -o-linear-gradient( to left top, blue, red);
background: linear-gradient( to left top, blue, red);
}HTML Dog
htmldog.com › guides › css › advanced › gradients
Gradients | HTML Dog
A single gradient will fill a box ... well, repeat the gradient. For basic bars of black-and-white bars, for example: background: repeating-linear-gradient(white, black 15px, white 30px);...
ColorSpace
mycolor.space › gradient
ColorSpace - CSS Gradient Color Generator
New Feature: You can now create a gradient out of 3 colors! ... CSS Code: background-image: linear-gradient(to right top, #051937, #004d7a, #008793, #00bf72, #a8eb12);
CSS-Tricks
css-tricks.com › css3-gradients
CSS Gradients | CSS-Tricks
January 26, 2021 - Gradients are typically one color ... all. While declaring the a solid color uses background-color property in CSS, gradients use background-image....
WebGradients
webgradients.com
WebGradients - Free CSS Gradients for Backgrounds and UI by itmeo
Browse 180 free CSS gradients for backgrounds, UI, websites, and design systems. Copy CSS code, explore color palettes, and find gradient inspiration fast.
Top answer 1 of 3
2
You need to give the gradient attribute to the html element instead of body element.
So instead of this:
<head>
<style>
html {
height: auto;
}
body {
background-image: linear-gradient(to bottom right, pink, white);
height: auto;
background-attachment: fixed;
background-size: cover;
}
You should have this:
<head>
<style>
html {
height: auto;
background-image: linear-gradient(to bottom right, pink, white);
}
body {
height: auto;
background-attachment: fixed;
background-size: cover;
}
Is that what you were looking for?
2 of 3
1
The issue you are facing here is oveflow. Your element are overflowing the body and the size of the gradient fit the size of the body then it's getting propagated to the root element and repeated. To avoid this you may need to add another container that you make inline-block.
.container {
background-image: linear-gradient(to bottom right, pink, white);
display: inline-block;
}
.container > div {
display: inline-block;
height: 100px;
width: 100px;
}
.blue {
background-color: blue;
}
.yellow {
background-color: yellow;
}
.red {
background-color: red;
}
.magenta {
background-color: magenta;
}
div.sand-brown {
background-color: rgb(214, 176, 93);
/*height: 5000px;*/
width: 5000px;
}
div.sand-brown2 {
background-color: rgb(214, 176, 93);
height: 5000px;
/*width: 5000px;*/
}<div class="container">
<div class="blue"></div>
<div class="yellow"></div>
<br>
<div class="red"></div>
<div class="magenta"></div>
<br>
<div class="sand-brown"></div>
<div class="sand-brown2"></div>
</div>web.dev
web.dev › learn › css › gradients
Gradients | web.dev
June 16, 2025 - CSS gradients allow you to create anything from a smooth gradient between two colors, right up to impressive artwork by mixing and repeating multiple gradients. The linear-gradient() function generates an image of one or more colors, progressively.
CSS Gradient
cssgradient.io › gradient-backgrounds
Gradient Backgrounds – 🌈 The Best Gradient Sites All in One Place
Discover the best gradient backgrounds from a curated collection of the ultimate list of gradient sites. With 1000+ gradients, it's easy to find the 👌 color!
Web Dev Etc
webdevetc.com › blog › how-to-add-a-gradient-overlay-to-a-background-image-using-just-css-and-html
How to add a gradient overlay to a background image using just CSS and HTML - Web dev etc - my software development blog
However, the easiest way to do it is to just add another parameter to the background-image css rule. Take a look! ... #show_bg_2 { background-image: linear-gradient(to bottom, rgba(245, 246, 252, 0.52), rgba(117, 19, 93, 0.73)), url('images/background.jpg'); width: 80%; height: 400px; ...
Tailwind CSS
tailwindcss.com › docs › background-image
background-image - Backgrounds - Tailwind CSS
Use the bg-none utility to remove an existing background image from an element: ... Use utilities like bg-linear-[<value>] and from-[<value>] to set the gradient based on a completely custom value: <div class="bg-linear-[25deg,red_5%,yellow...
ColorZilla
colorzilla.com › gradient-editor
Ultimate CSS Gradient Generator - ColorZilla.com
Support for full multi-stop gradients with IE9 (using SVG). Add a "gradient" class to all your elements that have a gradient, and add the following override to your HTML to complete the IE9 support: Links to CSS gradients documentation: W3C, Firefox, Safari, Chrome (Webkit), Internet Explorer, Opera [2].
uiGradients
uigradients.com
uiGradients - Beautiful colored gradients
A handpicked collection of beautiful color gradients for designers and developers
W3Schools
w3schools.com › cssref › func_linear-gradient.php
CSS linear-gradient() function
#grad { background-image: linear-gradient(to right, rgba(255,0,0,0), rgba(255,0,0,1)); } Try it Yourself » ... If you want to use W3Schools services as an educational institution, team or enterprise, send us an e-mail: sales@w3schools.com · ...