Das wäre Dein Ansatz:
Code:
* {
margin: 0;
padding: 0;
}
html,
body {
height: 100%
}
body {
background: #000 linear-gradient(to bottom, #f00 10%, #ff0 20%, #000 30%) no-repeat;
}
Das ergibt einen Verlauf, der (vertikal gesehen) bei 10% beginnt, bei 20% eine Zwischen- und bei 30% seine Zielfarbe erreicht, also de facto 20% hoch ist (bezogen auf den Viewport). Das separate #000 ist nötig, da sonst ist der Bildschirm unterhalb der 100% weiß ist, und no-repeat verhindert eine Wiederholung des Verlaufs unterhalb der 100% (beides sieht man erst, wenn der Seiteninhalt höher als der Viewport = 100% ist und man runterscrollt). Alternativ fixed für background, sofern er beim Scrollen stehenbleiben soll.
P.S.: "to bottom" kannst Du auch weglassen, da Initialwert.