Element UI is best viewed on desktop
Add an animated gradient to any container to create this ‘glow effect’. The gradient smoothly shifts between your chosen colours, creating a vibrant glowing effect around your content cards, feature boxes, or call-to-action sections. Wrap your content container inside an outer container, apply the CSS, and customise the colours to match your brand.
How it works
You can use different colors for each card. Swap out the color values for your own and adjust the speed by changing the speed value.
Custom css
selector {
/* 1. Adjust speed here (Lower = Faster) */
--animation-speed: 3s;
/* 2. Adjust colors here */
background: linear-gradient(45deg, #2a004f, #ff00c1, #ffffff, #2a004f);
background-size: 400% 400% !important;
transition: all 0.3s ease;
}
selector:hover {
/* Animation triggers on hover */
animation: moveGradient var(--animation-speed) ease infinite !important;
}
@keyframes moveGradient {
0% { background-position: 0% 50%; }
50% { background-position: 100% 100%; }
100% { background-position: 0% 50%; }
}