Create an Animated Rainbow Border Box in Elementor (CSS Tutorial)

Want to make your Elementor sections stand out with a colorful animated border?
In this tutorial, we’ll create a smooth Animated Rainbow Border Box using pure CSS inside Elementor — no extra plugins required.
This vibrant effect adds a modern, eye-catching design to your site and is perfect for highlight boxes, service sections, or hero banners.

Add Custom CSS in Elementor

Go to Advanced → Custom CSS and paste this:

/* 🌈 Animated Rainbow Border Box */
selector {
  position: relative;
  border-radius: 16px;
  padding: 30px;
  background: #000; /* black box background */
  color: #fff;
  text-align: center;
  overflow: hidden;
}

/* Animated rainbow border */
selector::before {
  content: "";
  position: absolute;
  inset: 0;
  padding: 3px; /* border thickness */
  border-radius: inherit;
  background: conic-gradient(
    red, orange, yellow, lime, cyan, blue, violet, red
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events: none;
  animation: spin 5s linear infinite;
  z-index: 0;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

/* Make sure content stays above border */
selector > * {
  position: relative;
  z-index: 1;
}

/* 🌈 Button inside box */
selector .rainbow-btn {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 30px;
  background: linear-gradient(90deg, red, orange, yellow, lime, cyan, blue, violet);
  color: #fff;
  border: none;
  border-radius: 8px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  animation: rainbowShift 3s linear infinite;
  background-size: 400%;
}

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

selector .rainbow-btn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 15px rgba(255,255,255,0.4);
}