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
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, ...);
W3Schools
w3schools.com › colors › colors_gradient.asp
Colors Gradient
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS DSA TYPESCRIPT ANGULAR ANGULARJS GIT POSTGRESQL MONGODB ASP AI R GO KOTLIN SWIFT SASS VUE GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE INTRO TO PROGRAMMING INTRO TO HTML & CSS BASH RUST TOOLS · Colors HOME Color Names Color Values Color Groups Color Shades Color Picker Color Mixer Color Converter Color RGB Color HEX Color HSL Color HWB Color CMYK Color NCol Color Gradient Color Theory Color Wheels Color currentcolor Color Hues Color Schemes Color Palettes Color Brands Color W3.CSS Color Metro UI Color Win8 Color Flat UI Color Psychology
Videos
04:01
How To Use Gradient Background In HTML And CSS - YouTube
04:44
How To Add A Gradient Background Colour To Your Squarespace Websites ...
06:16
Pure CSS Animated Gradient Background | HTML and CSS Tutorial - ...
17:41
Colorful Background with linear-gradient - YouTube
W3Schools
w3schools.com › cssref › func_linear-gradient.php
CSS linear-gradient() function
This linear gradient starts at the top. It starts red, transitioning to yellow, then to blue: #grad { background-image: linear-gradient(red, yellow, blue); } Try it Yourself »
W3Schools
w3schools.com › css › css3_gradients_conic.asp
CSS Conic Gradients
#grad { background-image: repeating-conic-gradient(red 0deg 10deg, yellow 10deg 20deg, blue 20deg 30deg); border-radius: 50%; } Try it Yourself » · The following table lists the CSS gradient functions: ... If you want to use W3Schools services ...
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.
W3Schools
w3schools.com › htmlcss › htmlcss_colors_backgrounds.asp
HTML & CSS Colors and Backgrounds
This example composes a full-viewport hero using two layered backgrounds: a semi-transparent gradient on top of a photo. It centers content with CSS Grid. Syntax highlights: multiple background-image values separated by commas, plus responsive clamp() sizing for headings. <!DOCTYPE html> <html> <head> <link rel="stylesheet" href="styles.css" type="text/css"> </head> <body> <section class="hero"> <div> <h1>Design with color</h1> <p>Layer gradients and imagery with accessible contrast.</p> </div> </section> </body> </html>
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.
W3Schools Blog
w3schools.blog › home › css gradient
CSS Gradient - w3schools.blog
October 30, 2019 - ... <!DOCTYPE html> <html> <head> <style> div { height:200px; width: 200px; background: -webkit-radial-gradient(red, white, blue); background: -o-radial-gradient(red, white, blue); background: -moz-radial-gradient(red, white, blue); background: radial-gradient(red, white, blue); } </style> ...
W3Schools
w3schools.in › css3 › gradient-text
How to Create CSS Text Gradient - W3Schools
background-image: linear-gradient(45deg, red, yellow, blue); Using CSS to create Text Gradient is simple and quick. You can make your web pages more visually appealing and modern with just a few lines of code.
CSS Gradient
cssgradient.io
CSS Gradient – Generator, Maker, and Background
Interested in learning how to use blended colors? Our blog exposes the details of everything gradients and even has some in-depth references for you to look at as you learn how to code these elements yourself.
W3Docs
w3docs.com › html
How to Set Background Color with HTML and CSS
<!DOCTYPE html> <html> <head> <title>Title of the document</title> <style> #grad { height: 500px; background-color: blue;/* For browsers that do not support gradients */ background-image: linear-gradient(to right, #1c87c9, #8ebf42); } </style> ...
W3Schools
w3schools.com › howto › howto_css_bg_gradient_scroll.asp
How To Change Background Gradient on Scroll
Learn how to create a gradient background color on scroll.
W3Schools
w3schools.com › css › css3_gradients_radial.asp
CSS Radial Gradients
A radial gradient requires at least two color stops. Color stops are the colors you want to render smooth transitions among. background-image: radial-gradient(shape size at position, start-color, ..., last-color);
W3Schools
w3schools.com › cssref › func_radial-gradient.php
CSS radial-gradient() function
The CSS radial-gradient() function sets a radial gradient as the background image.
W3Schools
w3schools.com › css › css3_masking_gradients.asp
CSS Masking - Gradient Mask Layers
CSS Templates CSS Examples CSS Editor CSS Snippets CSS Quiz CSS Exercises CSS Code Challenges CSS Website CSS Syllabus CSS Study Plan CSS Interview Prep CSS Bootcamp CSS Certificate · CSS Reference CSS Selectors CSS Combinators CSS Pseudo-classes CSS Pseudo-elements CSS At-rules CSS Functions CSS Reference Aural CSS Web Safe Fonts CSS Animatable CSS Units CSS PX-EM Converter CSS Colors CSS Color Values CSS Default Values CSS Browser Support ... CSS gradients can also be used as the mask layer image.
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);...
W3Schools
w3schools.com › css › tryit.asp
W3Schools online HTML editor
❯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 › graphics › canvas_gradients.asp
HTML Canvas Linear Gradients
Gradients let you display smooth transitions between two or more specified colors.
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.
CSS-Tricks
css-tricks.com › css3-gradients
CSS Gradients | CSS-Tricks
January 26, 2021 - You can use SVG for fallback as following: background-image:url('data:image/svg+xml,'); I.e. write usual SVG as data:url, you only need to replace „#“ with „#“. Pros: you can modify gradients right in CSS.