Gradient Outline

I got some inspiration from an Erik D. Kennedy post (who doesn’t?) and was captured by this gradient outline (which he calls a “bevelled border”).

The example above is using a headline block set to inline width with a background color, some padding, and no border.

Just give the heading the class of .border-gradient and paste this CSS into your stylesheet:

.border-gradient{
  position: relative;
}

.border-gradient:after{
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  margin: -1px;
  border-radius: inherit;
  background-image: linear-gradient(25deg, var(--contrast) 20%, rgba(254,194,0,1) 55%, var(--contrast) 75%, var(--contrast) 100%);
}

Of course, you may want to play with the thickness of the border, the colors in the gradient, etc., but the important part is to use the background color of your section inside of the gradient (so it “disappears” in places).