Eurovision Gradients

#css #webdev #showdev #tutorial

So, it's that time of the year, if you live in Europe: Eurovision! It's the world's oldest and largest song competition — that people either love, hate or love/hate!

I watched the first semifinal yesterday, and was actually blown away by the graphic design this year. Really nice, animated gradients — and a very vibrant color palette.

But … then I went to the official website, and saw a 4.6 megabyte pixelated, sad looking animated gradient! Why? When we can easily do animated gradients in CSS?

Let's dive in.

Re-creating the gradients

If you look at the gradients — or if you watched the show — you'll notice it's basically a grid with columns that span between 1—8.

.eurovision {
  aspect-ratio: 4/1;
  container-type: inline-size;
  display: grid;
  grid-auto-flow: column;
  position: relative;
  width: 100%;
}

Now, for the columns, we'll create a bunch of <b>-tags (can be any tag, basically), and add some CSS:

b {
  animation: Y var(--animdur, 5s) var(--animdel, 0s) var(--animtf, linear) infinite;
  background: repeating-linear-gradient(var(--deg, 0deg), var(--c1, orange), var(--c2, hotpink), var(--c3, yellow), var(--c2, hotpink), var(--c1, orange));
  background-size: 100% 500%;
  display: block;
}

The animation simply moves the Y-position of the background:

@keyframes Y {
  to { background-position-y: 250%; }
}

To create some variation, we change the animation-delay for the <b>-tags, based on their nth-of-type:

b {
  &:nth-of-type(1) { --animdel: 50ms; }
  &:nth-of-type(2) { --animdel: 100ms; }
  &:nth-of-type(3) { --animdel: 150ms; }
  &:nth-of-type(4) { --animdel: 200ms; }
  &:nth-of-type(5) { --animdel: 250ms; }
  /* etc. */
}

Finally, for the column-spans, we add some modifier-classes:

.span-2 { grid-column: span 2; }
.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
/* etc. */

Let's see how we're doing:

Vibrant! Now, because of the custom properties, we can just add a class with some updates to get the purple/pink-gradient:

.header {
  --c1: purple;
  --c2: deeppink;
  --c3: hotpink;
}

Nice! I added a gradient text as well:

h1 {
  background: linear-gradient(95deg, yellow, hotpink, deeppink, orange);
  background-clip: text;
  font-family: "Hind", sans-serif;
  font-optical-sizing: auto;
  font-weight: 500;
  font-style: normal;
  font-size: 10cqi;
  letter-spacing: -0.075ch;
  place-self: center center;
  position: absolute;
  text-transform: uppercase;
  -webkit-text-fill-color: transparent;
}

Now, for the red/blue-version, I took one of the nice linear() timing-functions from Adam Argyle's Open Props:

.red-shift {
  --c1:red;
  --c2:purple;
  --c3:blue;
  --animtf:linear( 0, .006, .025 2.8%, .101 6.1%, .539 18.9%, .721 25.3%, .849 31.5%, .937 38.1%, .968 41.8%, .991 45.7%, 1.006 50.1%, 1.015 55%, 1.017 63.9%, 1.001 );
}