Use conic gradients to create a cool border

W

web.devweb.dev

·

Use conic gradients to create a cool border

Conic gradients make for a cool border effect

Conic gradients aren't just for backgrounds. As Adam Argyle demonstrates in this CodePen, originally shared via a tweet, they can produce an eye-catching border on an element. The effect relies on a standard CSS property that accepts image values, which means any CSS gradient type works as the source.

Feeding a gradient into the border

The key is the border-image-source property. This property sets the source image used to create an element's border, and since it accepts image values, a conic gradient is a perfectly valid input.

Terry Mun took the concept further with a fork of Adam's original work, shown in this CodePen. In Terry's version, moving the mouse over the element animates the gradient's angle. A small amount of JavaScript drives the update, writing a value to a CSS custom property that stores the rotation angle.

A simple demo

.conic-gradient-border {
  border: 25px solid;
  border-image-slice: 1;
  border-image-source: conic-gradient(
    hsl(100 100% 60%),
    hsl(200 100% 60%),
    hsl(100 100% 60%)
  );
}