A responsive striped CSS gradient inspired by 80s VHS tapes
Tags: webdev, css, beginners, tutorial
Published: 2022-11-22 10:25:42

I'm really into retro-tech at the moment. And whilst I still haven't gotten round to playing with my new [Commodore 64 Emulator](https://vice-emu.sourceforge.io/), I have been collecting images of old VHS tapes that inspired the design of [my most recent website project](https://whattheframework.netlify.app/). Just look at the beauty that is the Sony T-120!

![Front and back sleeve covers of the Sony T-120 Dynamicron VHS tape.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/g3nfj8d6rogc8u9msxpp.jpg)

Inspired by the Sony T-120 and other similar retro VHS designs by [Christopher Kirk-Nielsen](https://chriskirknielsen.com/designs/) (four of which are hanging proudly in my office!), I created a moodboard and sent it on to my good friend, designer and live streamer [aaoa_](https://twitch.tv/aaoa_). He created this beautiful retro striped pattern for me, and my challenge was to build this in pure CSS without using a background image.

![Gradient horizontal striped background using hard stops, ranging from yellow at the top, through to orange, red, pink, purple, dark blue and bright blue.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/t16s1iat2zhmv6nt3u99.png)

## How it looks

{% codepen https://codepen.io/whitep4nth3r/pen/BaVJgaa %}

## 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](https://css-tricks.com/books/greatest-css-tricks/hard-stop-gradients/)". A hard stop is created by defining the end of one colour _in the same place as the start of the next colour_.

### vh 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](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Values_and_units).

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.

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

Here's the result.

![A red block on top of a yellow block. Each block is the same size.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/67vk6tabmp0zqwvn8q6q.png)

Notice that:
- the first colour (red) **ends at 50vh**
- the second colour (yellow) **starts at 50vh**

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](https://developer.mozilla.org/en-US/docs/Web/CSS/Using_CSS_custom_properties) and [CSS calc()](https://developer.mozilla.org/en-US/docs/Web/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.

![Screenshot of the CSS code using custom properties, showing that the end stop of the second colour is the same as the start stop of the third colour.](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/6jgevwdknw0scs1yreuq.png)

## 🔥 Today I learned!
[Oliver Turner](https://indieweb.social/@oliverturner@toot.cafe/109387154309652197) turned up on Mastodon with some solid advice that I'd not discovered before!

>One interesting property of linear gradients that can make generating stripes less verbose is that *any* number less than the previous stop works to create a hard border, so instead of needing to track the previous value you can use 0.

[Here's the demo](https://codepen.io/oliverturner/pen/JjZpprN)

Thanks, Oliver!

And finally, to allow the page content to scroll whilst 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**. Experiment in the CodePen above and see what happens if you remove the height property on the `.wrapper` class!

See what you can make with this CodePen. Take it, fork it, copy and paste it... Take this linear gradient wherever your heart desires!