Create a navbar with gradient

TL;DR codepen

I was hanging out at fly.io and noticed this sweet top navigation bar

so I had to machete through all the tailwind to replicate.

First we pick three colors: lightskyblue rebeccapurple sandybrown

Let's introduce a nav with a height

<nav>
</nav>

nav {
  height: 80px;

Now let's introduce the gradient from top left to bottom right

nav {
  background: 
    linear-gradient(to bottom right 
      lightskyblue rebeccapurple sandybrown
    );
}

We need to reduce the opacity on lightskyblue and sandybrown so let's get their HSL using shift click like so

GIF

With reduced opacity (0.25), our code may look something like

nav {
  background: linear-gradient(
    to bottom right,
    hsla(203, 92%, 75.5%, 0.25),
    rebeccapurple,
    hsla(27.6, 87.1%, 66.7%, 0.25)
  );
}

Now let's add a background to the whole thing

nav {
  background-color: rebeccapurple;
}

I didn't love this so I went ahead and abstracted the rebeccapurple to HSL so I could darken it significantly (lightness in HSL from 40 to 15). It's in a CSS variable because we'll use it twice.

nav {
/* --rebecca-purple: hsl(270, 50%, 40%); */
  --rebecca-purple: hsl(270, 60%, 15%);

Almost there. A good gradient doesn't look like a gradient. So let's bring the lightness of the first and last colors down to 35% for the final result.

nav {
  --rebecca-purple: hsl(270, 60%, 15%);
  background-image: linear-gradient(
    to bottom right, 
    hsla(203, 92%, 35.5%, 0.25), 
    var(--rebecca-purple), 
    hsla(27.6, 87.1%, 35.7%, 0.25)
  );
  background-color: var(--rebecca-purple);
}