loader image

Animated Border

Animated Border

Really cool eye catching animated border for cards, where you can adjust the colors, border size and speed.

3.5/5 - (2 votes)

Template Example

Card One

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Two

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

Card Three

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.

CREDIT Jim Fahad
CSS NEEDED

selector{
--first-color: #ef32d9;
--second-color: #FFFF00;
--size: 100px;
--speed: 4s;
}
selector{
overflow: hidden !important;
display: flex;
justify-content: center;
align-items: center;
}
selector:before{
content: '';
position: absolute;
width: var(--size);
height: 140%;
background: linear-gradient(var(--first-color), var(--second-color));
animation: animate var(--speed) linear infinite;
}
@keyframes animate{
0%{
transform: rotate(0deg);
}
100%{
transform: rotate(360deg);
}
}

HTML NEEDED

No Additional HTML Required

robedge.com | mt irvine tobago w.i. | 868.276.2665 | robedge@gmail.com