Gradient Outline

A subtle gradient outline for badges and pills.

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:

  position: relative;

  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).

Kyle Van Deusen

Co-founder of The Admin Bar Community, owner of OGAL Web Design, and a GeneratePress & GenerateBlocks enthusiast.

For official support, please visit the forums for GeneratePress or GenerateBlocks

If you're looking to have a website built with GeneratePress & GenerateBlocks, then visit my agency website.

Leave a Comment