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
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 - 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
05:56
How to create a gradient background - Quick tutorial - YouTube
01:18
Add Gradient Color | HTML and CSS Tutorial - YouTube
Modern CSS Gradients Tutorial — From Basics to Advanced Design ...
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 ...
How To Add HTML Gradient Background Image / CSS Gradient Tutorial ...
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.
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);
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 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
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.
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....
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
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.
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; ...
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!
uiGradients
uigradients.com
uiGradients - Beautiful colored gradients
A handpicked collection of beautiful color gradients for designers and developers
Learn UI Design
learnui.design › tools › gradient-generator.html
Gradient Generator (1-click CSS + SVG export) [+inspo gallery]
background: linear-gradient(90deg, #003f5b, #2b4b7d, #5f5195, #98509d, #cc4c91, #f25375, #ff6f4e, #ff9913);
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].
Reddit
reddit.com › r/css › how can i create a gradient background html css that pulses like a reference?
r/css on Reddit: How can I create a gradient background html css that pulses like a reference?
December 20, 2025 -
I've tried everything, but I can't code an animated background that looks exactly like the image. It always gives me problems! In all my attempts, the colors get cut off, or they're not in the same position as the reference.
Top answer 1 of 6
7
As far as I understand, the problem is that to have a curved gradient you need a radial-gradient to construct the curve. the effects of moving gradients, is normaly done by animating the bcakground positioning of said gradient, like this , then looping it. Doing this to a radial gradient would create a less accurate effect, like this but what you are asking is for the color positions in the radial-gradient to be dynamic and keep a fixed point of origin, and as far as I know, that's not possible. The best you can probably do with css, is to create a @keyframes rule where you effectively change the position of each color in the gradient: with enough steps the gradient would give the illusion of moving. I'd say is a pretty demanding animation, but doable
2 of 6
4
Can you put what you've tried online? On CodePen, JS Bin, JSFiddle, whatever? And explain more clearly what you'd expect your code to do vs. what it actually does? Unless you expect all displays in the world to have the exact same dimensions as your video reference, some parts of the gradient are always going to get cut off and won't be in the same position as in your video reference.