How to Create an Animated Glowing Border in Elementor
Want to make your feature boxes, cards, or calls-to-action truly stand out? A static design can sometimes get overlooked. By adding an animated, glowing border, you can instantly draw attention to your most important content and add a futuristic, high-tech feel to your website.
This tutorial will guide you through creating a beautiful, spinning gradient border for any Elementor container using a simple snippet of CSS. It’s a fantastic way to highlight services, pricing plans, or special offers. Let’s make it glow! Like this :
On a dark background
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
On a light background
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
Header 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut elit tellus, luctus nec ullamcorper mattis, pulvinar dapibus leo.
How It Works: The Concept
Before we start, it’s helpful to understand the clever trick behind this effect. We aren’t creating a traditional border. Instead, we’ll place a large, spinning gradient behind our main container. By adding a little space (padding) around the container, the edges of the spinning gradient become visible, creating the illusion of a live, animated border.
Step-by-Step Guide
This effect works best on a Container widget that holds other elements inside it (like a heading, a text editor, and a button). You will need can do this tutorial in Elementor Pro using the custom css feature, or you can add a html block to the page and create the same effect in Elementor Free.
Step 1: Prepare Your Inner & Outer Container
- Start by adding a Container to your page. This will be your outer container that holds your inner container with the content
- Inside that outer container, also add an inner container, that will hold all your content.
- Place your desired widgets inside it (e.g., an Image Box, Heading, Button, etc.).
- Go to the inner container’s Style tab, open the Border section, and set a Border Radius to round its corners. A value of
15pxis a great starting point. - Give this container a background color (e.g., a dark grey or black works well to make the glow pop).
Step 2: Create the Outer Container and Add the CSS Class
Now, select the parent (outer) container. This will act as the glowing frame. If you don’t have one, just drag your styled container into a new, empty container.
With the outer container selected, go to the Advanced tab.
In the CSS Classes field, enter the following class: glowing-border-card
Step 3: Add the Custom CSS
For Elementor Pro : While the outer container is still selected, go to the Advanced > Custom CSS section.
- For Elementor Free : Add an html-block somewhere on your page (it will not be visible in the frontend.
Copy the code below and paste it into the codefield. You should see the effect appear instantly around your inner container.
<style>/* -- Animated Glowing Border -- */
/* This is the Outer Container */
.glowing-border-card {
position: relative;
overflow: hidden;
/* This padding controls the thickness of your glowing border */
padding: 5px;
/* This should match the border-radius of your inner container */
border-radius: 15px;
}
/* This targets the Inner Container */
.glowing-border-card > .elementor-container {
position: relative; /* Lifts the container to create a new stacking layer */
z-index: 1; /* Ensures it sits on top of the glow effect */
}
/* This creates the spinning gradient element */
.glowing-border-card::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 250%;
height: 250%;
background: conic-gradient(
from 0deg,
#00ffc4, /* Color 1 */
#ff00f8, /* Color 2 */
#a900ff, /* Color 3 */
#00ffc4 /* Return to start color for a seamless loop */
);
animation: spin 4s linear infinite;
transform: translate(-50%, -50%);
}
/* Keyframes for the spinning animation (no changes needed here) */
@keyframes spin {
from {
transform: translate(-50%, -50%) rotate(0deg);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}
</style>Your container will have the beautiful animated glowing border!
If you want to use this code on multiple pages or posts, you can add the css code to your whole website. Go to WordPress Dashboard – Appearance – Customize and select Additional CSS. Place the code there and you can use the css class anywhere on your site.
How to Customize the Glow
Your container will have the beautiful animated glowing border!
If you want to use this code on multiple pages or posts, you can add the css code to your whole website. Go to WordPress Dashboard – Appearance – Customize and select Additional CSS. Place the code there and you can use the css class anywhere on your site.
Conclusion
And there you have it! With just one CSS class and a few lines of code, you’ve learned how to create a stunning animated gradient border in Elementor. It’s a simple yet powerful technique to elevate your web design and make your containers truly unforgettable.
Go on, give your digital cards the vibrant personality they deserve!