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 OverflowCSS 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.
Gradients
Looking for gradient inspiration? You’ve come to the right place. Browse our nicely curated collection of beautiful gradients in all colors: blue, red and more.
Color Shades
Color shades are lighter and darker variations of a particular color, created by adding white or black. Explore shades of red, blue, green, yellow, purple and pink.
Backgrounds
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!
CSS Gradient Text
These are typically referred to ... tell the code at which points each color should stop along the text gradient. These colors can be set as any type: named, HEX, RGB, or HSL. Because of this, there are a lot of different options when it comes to how your gradient can be shown. The most important part of your CSS gradient text is the actual CSS itself. Check out the basic form of the CSS · h1 { font-size: 72px; background: ...
W3Schools
w3schools.com › css › css3_gradients.asp
CSS Gradients
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. background-image: linear-gradient(direction, color-stop1, color-stop2, ...);
css - How to create a gradient background for an HTML page - Stack Overflow
What is the best way to create a gradient background for an HTML page? ... I know this is not a gradient. ... 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 ... 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, 2022html - 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
Videos
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
03:22
Elevate Your Website with Radial Gradient Background | HTML & CSS ...
01:18
Add Gradient Color | HTML and CSS Tutorial - YouTube
04:01
How To Use Gradient Background In HTML And CSS - 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
body { background: linear-gradient( to right, red 20%, orange 20% 40%, yellow 40% 60%, green 60% 80%, blue 80% ); }
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.
HTML Dog
htmldog.com › guides › css › advanced › gradients
Gradients | HTML Dog
background: linear-gradient(to right, orange, red); ... Note that the “to” is excluded with angles because there isn’t an explicit destination. Link To Us! If you've found HTML Dog useful, please consider linking to us.
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);
uiGradients
uigradients.com
uiGradients - Beautiful colored gradients
A handpicked collection of beautiful color gradients for designers and developers
Bootstrap
getbootstrap.com › docs › 5.0 › utilities › background
Background · Bootstrap v5.0
Do you need a gradient in your custom CSS? Just add background-image: var(--bs-gradient);.
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 and explore color palettes.
W3Schools
w3schools.com › colors › colors_gradient.asp
Colors Gradient
W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.
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:
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);
}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!
GeeksforGeeks
geeksforgeeks.org › how-to-create-linear-gradient-text-using-html-and-css
How to create linear gradient text using HTML and CSS ? | GeeksforGeeks
June 21, 2024 - Please refer linear-gradient() method to create a gradient background and then use webkit properties to overlay that background with our text. Example: In the following section, the text used for demonstration is wrapped inside the h1 tag.
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>Litmus
litmus.com › home page › blogs hub › a strategic guide to calls-to-action (ctas) in email marketing: best practices for success
The Best Way to Code HTML Email Background Colors and Gradients
December 8, 2025 - Just as you would do with solid color backgrounds, apply CSS linear gradient backgrounds to a table or table cell, or a containing div (we’ll dive into an Outlook workaround shortly), to create something like this: See how we created this gradient in Litmus Builder · In this example, the gradient includes three colors: purple, magenta and orange. The styling starts within the HTML with a solid color fallback applied to the bgcolor attribute.
MakeUseOf
makeuseof.com › home › programming › 35 stylish css background gradient examples
35 Stylish CSS Background Gradient Examples
July 3, 2023 - To create the gradient shown above, use the following CSS code: background-image: linear-gradient(to right, #DECBA4, #3E5151);
CodePen
codepen.io › P1N2O › pen › pyBNzX
🌈 Pure CSS Animated Gradient Background
Note: your code becomes un-folded during formatting. ... Visit your global Editor Settings. ... <div class="d-flex flex-column justify-content-center w-100 h-100"> <div class="d-flex flex-column justify-content-center align-items-center"> <h1 class="fw-light text-white m-0">Animated Gradient Background</h1> <div class="btn-group my-5"> <a href="https://codepen.io/P1N2O/details/pyBNzX" target="_blank" class="btn btn-outline-light" aria-current="page"><i class="fas fa-circle-info me-2"></i> PEN DETAILS</a> <a href="https://codepen.io/P1N2O/full/pyBNzX" target="_blank" class="btn btn-outline-light">FULL SCREEN <i class="fas fa-expand ms-2"></i></a> </div> <a href="https://github.com/p1n2o" class="text-decoration-none"> <h5 class="fw-light text-white m-0">— P1N2O —</h5> </a> </div> </div> </div>