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

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);
}