Press "Enter" to skip to content

Quick Animated Gradient Border In Pure CSS

CSS Border Animation is a cool animated square border design concept that makes a gradient line move periodically along the border of an element.

gradient border bottom css, border image gradient, simple border animation css, border animation css, on hover border animation css, css animate border left to right

JavaScript Library For Creating Smooth Gradients Generator

How to make use of it:

1. Apply a gradient stroke to the target element.

<div class="demo"></div>
div.demo {
  width: 250px;
  height: 250px;
  box-shadow: 16px 14px 20px #0000008c;
  border-radius: 10px;
  position: relative;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.demo::before{
  content: "";
  /* override the gradient here */
  background-image: conic-gradient(
    #ff0052 20deg,
    transparent 120deg
  );
  width: 150%;
  height: 150%;
  position: absolute;
  animation: rotate 2s linear infinite;
}

div.demo::after{
  content: "CSSScript";
  width: 240px;
  height: 240px;
  background: #101010;
  position: absolute;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ff0052;
  font-size: larger;
  letter-spacing: 5px;
  box-shadow: inset 20px 20px 20px #0000008c;
}

2. Animate gradient strokes using CSS Rotation.

@keyframes rotate {
  0%{
    transform: rotate(0deg);
  }
  100%{
    transform: rotate(-360deg);
  }
}

Animated Gradient Border animation css Plugin/Github, css glowing border animation


See Demo And Download

Official Website(CodMark): Click Here

This superior jQuery/javascript plugin is developed by CodMark. For extra Advanced Usages, please go to the official website.

Be First to Comment

    Leave a Reply

    Your email address will not be published.