Skip to main content

Backgrounds and Gradients

CSS background properties are used to define the background effects for elements.

1. Background Image​

The background-image property specifies an image to use as the background of an element.

body {
  background-image: url("paper.gif");
  background-repeat: no-repeat;
  background-position: right top;
  background-attachment: fixed; /* Parallax effect */
}

2. Background Shorthand​

To shorten the code, it is also possible to specify all the background properties in one single property.

body {
  background: #ffffff url("img_tree.png") no-repeat right top;
}

3. CSS Gradients​

CSS gradients let you display smooth transitions between two or more specified colors.

Linear Gradients​

#grad {
  background-image: linear-gradient(to right, red , yellow);
}

Radial Gradients​

#grad {
  background-image: radial-gradient(circle, red, yellow, green);
}

4. Shadows​

Transitions and visuals often involve shadows to add depth.

  • text-shadow: 2px 2px 5px red;
  • box-shadow: 10px 10px 5px grey;