VHS-in-CSS

How it looks

Live preview is here!

How it works

Hard stops

The pattern is created using a CSS linear-gradient (using the direction "to bottom") with what are known as "hard stops". A hard stop is created by defining the end of one colour in the same place as the start of the next colour.

"vh" (Viewport's height) units

The biggest design challenge was making sure the full pattern of 14 colours was visible at any viewport size, and didn't scroll with the content. The key was to use vh unit to determine the size of each colour stop. The vh unit is a relative unit, and describes a percentage of the viewport height. 1vh is 1% of the viewport height, 50vh is 50% of the viewport height and so on. Using vh is what enables the full gradient pattern to respond to the height of the viewport. Read more about different units in CSS on MDN.

Here's a two-colour hard stop gradient as an example, in which we're using the vh unit to specify the size of each colour stop.

.twoColorStop {
  min-height: 100vh;
  background: linear-gradient(
    to bottom, 
    red 0 50vh,
    yellow 50vh 100vh
  );
}

Here's the result.

Notice that:

the first colour (red) starts at 0 and ends at 50vh

the second colour (yellow) starts at 50vh and ends at 100vh

Where red stops, yellow begins, creating a hard stop. There are ways you can write the CSS above in a shorthand form, but I've written it out verbosely to demonstrate the concept more clearly.

The only differences between this example and the full example is that I'm using 14 colours instead of two colours, and I'm using CSS custom properties and CSS calc() to avoid writing out 14 lines of magic numbers. Notice though, that where one colour ends, another colour begins at the same vh value.

And finally, to allow the page content to scroll while the background pattern stays fixed in place in the viewport, it's wrapped in a vertically-scrollable element inside the container providing the background gradient pattern. Set height: 100vh on this element to prevent the content increasing the height of the last colour in the gradient.