I'm attempting to design a gradient background using HTML and CSS. The gradient I want should be red for the top 10% and green for the remaining 80%, similar to this example:
https://i.sstatic.net/TlnIh.jpg
To achieve this, I came up with the following code:
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
html, body{margin: 0; padding:0;}
</style>
</head>
<body>
<div style="position: fixed; z-index: 1; background: linear-gradient(red 10%, green); height: 100%; width:100%"></div>
</body>
<script>
</script>
</html>
However, the result I'm getting looks like this:
https://i.sstatic.net/Bfsu9.jpg
I would appreciate it if someone could point out what is wrong with my code and how I can accomplish my goal.