How to create a Border Gradient in CSS

Learn with us how to create a Border Gradient in CSS!

If you found us on TikTok on the following post, check out this article and copy-paste the full code!

Happy coding! 😻

@creative.tim You can never go wrong with a spark of color, can you? Try this in CSS. Find the full copy-paste code in bio! #coding #css #programming ♬ sunet original - Creative Tim

1. HTML Code

<div class="box">
</div>
<!-- Inspired by the mega buttons on https://turbo.build/ -->

2. CSS Code

html {
  height: 100%;
  background: #223;
  display: grid;
  place-items: center;
}

.box {
  --border-size: 3px;
  --border-angle: 0turn;
  width: 60vmin;
  height: 50vmin;
  background-image: conic-gradient(
      from var(--border-angle),
      #213,
      #112 50%,
      #213
    ),
    conic-gradient(
      from var(--border-angle),
      transparent 20%,
      #2d00f7,
      #c200fb,
      #ec7d10,
      #30f2f2,
      #7cb518
    );
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
    cover;
  background-position: center center;
  background-repeat: no-repeat;

  animation: bg-spin 3s linear infinite;
  @keyframes bg-spin {
    to {
      --border-angle: 1turn;
    }
  }

  &:hover {
    animation-play-state: paused;
  }
}

@property --border-angle {
  syntax: "<angle>";
  inherits: true;
  initial-value: 0turn;
}

I hope you did find this tutorial useful!

For more web development or UI/UX design tutorials, follow us on:

Other useful resources: