TikTok Tutorial #31 - 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">
<!-- 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),
      #112 50%,
      from var(--border-angle),
      transparent 20%,
  background-size: calc(100% - (var(--border-size) * 2))
      calc(100% - (var(--border-size) * 2)),
  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:

Alexandra Murtaza

Alexandra Murtaza