I am trying to achieve a background design that includes both linear and radial gradients. The linear gradient should display a transition from blue to white, while the radial gradient should overlay a polka dot pattern on top of it. I have been following the instructions provided on a guide from W3Schools, but I am facing difficulty in getting both gradients to show simultaneously. To further explain my issue, I have included a codesandbox link. Can someone please assist me and point out what I might be overlooking?
Here is the desired outcome:
https://i.stack.imgur.com/5Uh1n.png
However, I would like the circles instead of stars to cover the entire page.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>Static Template</title>;
<style>
.container {
height: 100vh;
width: 100vw;
/* Controls size of dot */
background-image: linear-gradient(#ffffff 44%, #01a2ce 100%, #ffffff 0%),
radial-gradient(black 20%, white 20%);
/* Controls Spacing, First value will scale width, second, height between dots */
background-size: auto, 50px, 50px;
}
</style>
</head>
<body>
<div class="container">
<h3>
I want to display both the linear and radial backgrounds here. Linear
will show the blue->white gradiant and radial will show the black polka
dots.
</h3>
</div>
</body>
</html>