DEV Community

Cover image for Snake border animation CSS

Posted on • Updated on

Snake border animation CSS

Hello, guys in this tutorial we will create an animated snake border using HTML & CSS.

First, we need to create two files index.html and style.css then we need to do code for it.

Snake border animation Step:1

Add below code inside index.html

<!DOCTYPE html>
<html lang="en">
    <meta charset="UTF-8" />
    <title>Rotating Border Animation</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <link rel="stylesheet" href="style.css" />
    <div class="anim-border">
      <img src="rahul.jpg">
Enter fullscreen mode Exit fullscreen mode

Snake border animation Step:2

Then we need to add code for style.css which code i provide in below screen.

* {
    padding: 0;
    margin: 0;
    font-family: 'IBM Plex Sans', sans-serif;
body {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    background: #f1f2f3;
@-webkit-keyframes rotate {
  100% {
    transform: rotate(1turn);
@keyframes rotate {
  100% {
    transform: rotate(1turn);
.anim-border {
    position: relative;
    z-index: 0;
    width: 300px;
    height: auto;
    border-radius: 10px;
    overflow: hidden;
    padding: 2rem;
.anim-border::before {
    content: "";
    position: absolute;
    z-index: -2;
    left: -50%;
    top: -50%;
    width: 200%;
    height: 200%;
    background-color: #b7a7ff;
    background-repeat: no-repeat;
    background-size: 50% 50%, 50% 50%;
    background-position: 0 0, 100% 0, 100% 100%, 0 100%;
    background-image: linear-gradient(#2e00ff, #917af9);
    -webkit-animation: rotate 4s linear infinite;
    animation: rotate 4s linear infinite;
.anim-border::after {
  content: "";
  position: absolute;
  z-index: -1;
  left: 6px;
  top: 6px;
  width: calc(100% - 12px);
  height: calc(100% - 12px);
  background: white;
  border-radius: 5px;
.anim-border img {
    width: 100%;
.container {
    max-width: 1060px;
    margin: auto;
Enter fullscreen mode Exit fullscreen mode

Snake border animation video Output:

Snake border animation codepen Output:

Trending Responsive Menu
Advance Hover Animation

Top comments (4)

vikkio88 profile image

it would be nice to have a codepen or a hosted demo of the example too

bc profile image
Brian Canzanella


jupiteris profile image
Jupiter Programmer


mahomudgamalfcis profile image
Mahmoud Elgazzar

very good example, thank you for sharing it with us