Just when I thought styling my background with a simple line of code would be easy, I encountered an unexpected issue. Instead of a smooth linear-gradient from the top left to the bottom right, my background is showing rows of red and blue in between each other. If you want to take a look at how it looks like: enter image description here. I specifically used the colors red and blue for this gradient. Any help or suggestions would be greatly appreciated.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Title</title>
</head>
<body>
<div></div>
</body>
</html>
CSS
body {
background-image: linear-gradient(to top right, red, blue);
}