Creating animated borders and rainbow blurs with CSS and JavaScript

Don't be mistaken: it's not a shadow, but indeed a trick that will make your visitors believe you have added animated rainbow borders and shadows! It's not true: no borders and no shadows are used in this tutorial. Let's discover together the secret behind this magic trick.

Step 1

Let's start with the HTML code.

<div class="box"></div>

We can hardly do anything more simple.

Step 2

Let's take care of the box (.box) class.

.box {
  width: 400px;
  height: 300px;
  background-color: rgb(31, 31, 31);
  position: relative;
}

We are just creating a box of 400px by 300px.

Step 3

Let's now style the pseudo-elements before and after.

.box::before,
.box::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  background: linear-gradient(45deg, #ff0000, #00f0f0, #00ff00, #0000ff, #ff0000, #00f0f0, #00ff00, #0000ff, #f00f0f);
  width: 100%;
  height: 100%;
  transform: scale(1.02);
  z-index: -1;
  background-size: 500%;
  animation: animate 20s infinite;
}

In this step, we create two elements using the pseudo-elements before and after.

These two elements have a multicolor background that we enlarge by 500% to keep the most beautiful part.

We increase the size of our elements using the transform property by 2%, which allows us to give the impression of already having rainbow borders on our element.

Finally, we use the z-index property to place these elements behind our box, so as not to cover it.

Step 4

Add blur to the after element.

.box::after {
  filter: blur(20px);
}

In this step, we add blur to our after element only, which gives the impression of having a multicolor shadow.

Step 5

Let's develop our animation.

@keyframes animate {
  0% { background-position: 0 0; }
  50% { background-position: 300% 0; }
  100% { background-position: 0 0; }
}

This animation allows us to move our background on our elements, creating this movement effect.