1

I was trying to implement linear-gradient() in CSS, but the background with the gradient appears for an instant and then goes blank. The background remains white as I have not specified any particular background color. When I refresh the page, the gradient background appears for an instant again and then disappears, becoming white again.

body {
  max-height: 100%;
  max-width: 100%;
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}

This is the syntax I am using for implementing linear-gradient.

The browser I am using is Brave and the editor is VSCode.

Pete
  • 57,112
  • 28
  • 117
  • 166
Pandit
  • 23
  • 2

1 Answers1

2

You need to give your body a min height of 100% and the html element a height of 100% (You need to use min-height otherwise if your content is longer than the viewport height, the background won't show on the bottom overflow)

html {
  height: 100%;
}

body {
  margin: 0;
  min-height: 100%;
  max-width: 100%;
  background-image: linear-gradient(to right, rgba(255, 0, 0, 0), rgba(255, 0, 0, 1));
}
Pete
  • 57,112
  • 28
  • 117
  • 166