How to Set Background Color with HTML and CSS
Learn how to set a background color in general, how to have gradient and changing background colors with examples.
First thing you should know is that there are different types of HTML colors, such as Hex color codes, HTML color names, RGB and RGBa values, HSL colors, etc. To choose your preferred color use our Color Tools.
In this snippet, you can find many different ways of adding a background color. Let’s start from the easiest one.
Add the <span class="attribute">style</span> attribute to the <body> element
You can set a background color for an HTML document by adding <kbd class="highlighted">style="background-color:"</kbd> to the <body> element.
Example of setting a background color with the <span class="attribute">style</span> attribute:
Example of setting a background color for an HTML document by adding style="background-color:" to the <body> element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
</head>
<body style="background-color:#1c87c9;">
<h1>Some heading</h1>
<p>Some paragraph for example.</p>
</body>
</html>Result
<div class="demo p-2.5 mt-1 mb-5 not-prose"> Some headingSome paragraph for example.
</div>## Add the CSS background-color property to the <body> element
The background-color property is used to change the background color. Inserting it to the <body> element you will have a full colored cover of the page.
Example of setting a background color with the CSS background-color property:
Example of setting a background color by defining the background-color Property to the <body> Element
<!DOCTYPE html>
<html>
<head>
<title>Title of the document </title>
<style>
body {
background-color: #1c87c9;
}
</style>
</head>
<body></body>
</html>You can also add a background color to specific elements in your document. For example, let’s see how to change the color of the heading and paragraphs.
Example of adding a background color to specific elements:
Example of a background for specific elements
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
background-color: #e6ebef;
}
h2 {
background-color: #8ebf42;
}
p {
background-color: #1c87c9;
}
</style>
</head>
<body>
<h2>Some heading with green background.</h2>
<p>Some paragraph with blue background.</p>
</body>
</html>Let's see another example, where we add a background color with a color name value to the <h1> element. We specify a RGB value for the <h2>, HSL for the <p>, and RGBa value for the <span> element.
Example of setting background colors with different color types:
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
h1 {
background-color: lightblue;
}
h2 {
background-color: rgb(142, 191, 66);
}
p {
background-color: hsl(300, 100%, 25%);
}
span {
background-color: rgba(255, 127, 80, 0.58);
}
</style>
</head>
<body>
<h1>Example</h1>
<h2>Some heading with green background.</h2>
<p>Some paragraph with blue background.</p>
<span>Some paragraph for</span>
</body>
</html>Create a background with gradients
Gradient backgrounds let you create smooth transitions between two or more specified colors.
There are two types of gradient backgrounds: linear-gradient and radial-gradient.
In linear-gradient backgrounds, you can set a starting point for the colors. If you don't mention a starting point, it will automatically set "top to bottom" by default.
Example of setting a linear-gradient background:
Example of a Right to Left Linear Gradient background
<!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>
</head>
<body>
<h1>Right to Left Linear Gradient background</h1>
<div id="grad"></div>
</body>
</html>The given example shows a linear gradient that starts from the left. It starts from blue, transitioning to green. Change it according to your requirements.
In radial gradient backgrounds, the starting point is defined by its center.
Example of setting a radial-gradient background:
Example of a Radial Gradient Background
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
#grad {
height: 500px;
background-color: grey;/* For browsers that do not support gradients */
background-image: radial-gradient(#e6ebef, #1c87c9, #8ebf42);
}
</style>
</head>
<body>
<h1>Radial Gradient Background</h1>
<div id="grad"></div>
</body>
</html>You can also adjust percentages of your colors like this: (color1 30%, color2 50%, color3 20%).
Create a changing background
You can create a background which will change its colors in the mentioned time. For that, add the animation property to the <body> element. Use the @keyframes rule to set the background colors through which you'll flow, as well as the length of time each color will appear on the page.
Example of creating a changing background:
Example of a changing background | HTML | W3Docs
<!DOCTYPE html>
<html>
<head>
<title>Title of the document</title>
<style>
body {
-webkit-animation: colorchange 20s infinite;
animation: colorchange 20s infinite;
}
@-webkit-keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
@keyframes colorchange {
0% {
background: #8ebf42;
}
25% {
background: #e6ebef;
}
50% {
background: #1c87c9;
}
75% {
background: #095484;
}
100% {
background: #d0e2bc;
}
}
</style>
</head>
<body>
<h1>Changing Background</h1>
</body>
</html>The percentages specify the animation length mentioned in "colorchange" (e.g. 20s).
You can change the time and colors to achieve your preferred result.