Animated Gradient Border Generator

💻 CSS Code Output

/* CSS for Animated Gradient Border */
.animated-border {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background: white;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, #4361ee, #3a0ca3, #7209b7, #f72585);
    border-radius: 12px;
    z-index: -1;
    animation: rotateBorder 3s linear infinite;
}

@keyframes rotateBorder {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}
                

/* Advanced CSS with Pseudo-elements */
.animated-border {
    position: relative;
    padding: 20px;
    border-radius: 8px;
    background: white;
    overflow: hidden;
}

.animated-border::before {
    content: '';
    position: absolute;
    top: -4px;
    left: -4px;
    right: -4px;
    bottom: -4px;
    background: linear-gradient(45deg, 
        #4361ee 0%, 
        #3a0ca3 25%, 
        #7209b7 50%, 
        #f72585 75%, 
        #4361ee 100%);
    border-radius: 12px;
    z-index: -1;
    animation: rotateBorder 3s linear infinite;
    background-size: 400% 400%;
}

.animated-border::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    right: 2px;
    bottom: 2px;
    background: white;
    border-radius: 8px;
    z-index: -1;
}

@keyframes rotateBorder {
    0% { 
        background-position: 0% 50%;
        transform: rotate(0deg);
    }
    50% { 
        background-position: 100% 50%;
    }
    100% { 
        background-position: 0% 50%;
        transform: rotate(360deg);
    }
}
                

    
Your Content
    
This element has an animated gradient border.




    Click Me




    

        
Card Title
        
Card description with animated border effect.
        Learn More
    




    

        
    






                

// JavaScript for Interactive Animated Borders

// 1. Initialize animated border elements
document.addEventListener('DOMContentLoaded', function() {
    const animatedBorders = document.querySelectorAll('.animated-border');
    
    animatedBorders.forEach(border => {
        // Add hover effect
        border.addEventListener('mouseenter', function() {
            this.style.animationPlayState = 'paused';
            this.style.transform = 'scale(1.05)';
        });
        
        border.addEventListener('mouseleave', function() {
            this.style.animationPlayState = 'running';
            this.style.transform = 'scale(1)';
        });
    });
});

// 2. Dynamic color change
function updateBorderColors(element, newColors) {
    const gradient = `linear-gradient(45deg, ${newColors.join(', ')})`;
    element.style.setProperty('--border-gradient', gradient);
}

// 3. Toggle animation
function toggleBorderAnimation(element) {
    const isPaused = element.style.animationPlayState === 'paused';
    element.style.animationPlayState = isPaused ? 'running' : 'paused';
    return !isPaused;
}

// 4. Update animation speed
function updateBorderAnimationSpeed(element, speed) {
    element.style.animationDuration = `${speed}s`;
}

// 5. Create animated border dynamically
function createAnimatedBorder(container, options = {}) {
    const {
        width = '4px',
        colors = ['#4361ee', '#3a0ca3', '#7209b7', '#f72585'],
        borderRadius = '8px',
        animationSpeed = '3s'
    } = options;
    
    const borderElement = document.createElement('div');
    borderElement.className = 'animated-border';
    borderElement.style.cssText = `
        position: relative;
        padding: 20px;
        border-radius: ${borderRadius};
        background: white;
        overflow: hidden;
    `;
    
    const beforePseudo = document.createElement('div');
    beforePseudo.style.cssText = `
        content: '';
        position: absolute;
        top: -${width};
        left: -${width};
        right: -${width};
        bottom: -${width};
        background: linear-gradient(45deg, ${colors.join(', ')});
        border-radius: calc(${borderRadius} + ${width});
        z-index: -1;
        animation: rotateBorder ${animationSpeed} linear infinite;
    `;
    
    // Add keyframes if not already present
    if (!document.querySelector('#border-keyframes')) {
        const style = document.createElement('style');
        style.id = 'border-keyframes';
        style.textContent = `
            @keyframes rotateBorder {
                0% { transform: rotate(0deg); }
                100% { transform: rotate(360deg); }
            }
        `;
        document.head.appendChild(style);
    }
    
    borderElement.appendChild(beforePseudo);
    borderElement.innerHTML += container.innerHTML;
    container.innerHTML = '';
    container.appendChild(borderElement);
    
    return borderElement;
}

// 6. Responsive adjustments
function optimizeBorderForMobile() {
    const animatedBorders = document.querySelectorAll('.animated-border');
    const isMobile = window.matchMedia('(max-width: 768px)').matches;
    
    animatedBorders.forEach(border => {
        if (isMobile) {
            // Reduce animation speed on mobile
            border.style.animationDuration = '4s';
            // Reduce border width
            border.style.setProperty('--border-width', '2px');
        } else {
            border.style.animationDuration = '3s';
            border.style.setProperty('--border-width', '4px');
        }
    });
}

// 7. Intersection Observer for performance
function lazyLoadAnimatedBorders() {
    const observer = new IntersectionObserver((entries) => {
        entries.forEach(entry => {
            if (entry.isIntersecting) {
                entry.target.style.animationPlayState = 'running';
            } else {
                entry.target.style.animationPlayState = 'paused';
            }
        });
    }, { threshold: 0.1 });
    
    document.querySelectorAll('.animated-border').forEach(border => {
        observer.observe(border);
    });
}

// Initialize
window.addEventListener('load', function() {
    optimizeBorderForMobile();
    lazyLoadAnimatedBorders();
});

window.addEventListener('resize', optimizeBorderForMobile);