💻 CSS Code Output

/* CSS Background Pattern */
.pattern-background {
    background-color: #ffffff;
    background-image: 
        linear-gradient(45deg, #4361ee 25%, transparent 25%),
        linear-gradient(-45deg, #4361ee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #4361ee 75%),
        linear-gradient(-45deg, transparent 75%, #4361ee 75%);
    background-size: 50px 50px;
    background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
}

/* For better performance and cross-browser support */
.pattern-background {
    position: relative;
    overflow: hidden;
}

.pattern-background::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: 
        linear-gradient(45deg, #4361ee 25%, transparent 25%),
        linear-gradient(-45deg, #4361ee 25%, transparent 25%),
        linear-gradient(45deg, transparent 75%, #4361ee 75%),
        linear-gradient(-45deg, transparent 75%, #4361ee 75%);
    background-size: 50px 50px;
    background-position: 0 0, 0 25px, 25px -25px, -25px 0px;
    z-index: -1;
}
                

.pattern-background {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='50' height='50' viewBox='0 0 50 50'%3E%3Crect width='50' height='50' fill='%23ffffff'/%3E%3Cpath d='M0,0 L50,50' stroke='%234361ee' stroke-width='2'/%3E%3Cpath d='M50,0 L0,50' stroke='%234361ee' stroke-width='2'/%3E%3Ccircle cx='25' cy='25' r='10' fill='%233a0ca3' opacity='0.7'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 50px 50px;
}


.pattern-background-encoded {
    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPSc1MCcgaGVpZ2h0PSc1MCcgdmlld0JveD0nMCAwIDUwIDUwJz48cmVjdCB3aWR0aD0nNTAnIGhlaWdodD0nNTAnIGZpbGw9JyNmZmZmZmYnLz48cGF0aCBkPSdNMCwwIEw1MCw1MCcgc3Ryb2tlPScjNDM2MWVlJyBzdHJva2Utd2lkdGg9JzInLz48cGF0aCBkPSdNNTAsMCBMMCw1MCcgc3Ryb2tlPScjNDM2MWVlJyBzdHJva2Utd2lkdGg9JzInLz48Y2lyY2xlIGN4PScyNScgY3k9JzI1JyByPScxMCcgZmlsbD0nIzNhMGNhMycgb3BhY2l0eT0nMC43Jy8+PC9zdmc+");
    background-repeat: repeat;
    background-size: 50px 50px;
}
                

    


    

        
Your Content Here
        
This page has a beautiful pattern background.
    





    

        
Pattern Section
        
This section has a patterned background.
    






    

        
Pattern Card
        
This card features a subtle pattern background.
    






    Pattern Button



                

// JavaScript for Dynamic Pattern Backgrounds

// 1. Generate CSS Pattern dynamically
function generateCSSPattern(config) {
    const {
        type = 'geometric',
        colors = ['#4361ee', '#3a0ca3'],
        size = 50,
        opacity = 1,
        rotation = 0
    } = config;
    
    let patternCSS = '';
    
    switch(type) {
        case 'dots':
            patternCSS = `
                background-color: ${colors[0]};
                background-image: radial-gradient(${colors[1]} ${size/10}px, transparent ${size/10}px);
                background-size: ${size}px ${size}px;
            `;
            break;
            
        case 'stripes':
            patternCSS = `
                background: repeating-linear-gradient(
                    ${rotation}deg,
                    ${colors[0]},
                    ${colors[0]} ${size/4}px,
                    ${colors[1]} ${size/4}px,
                    ${colors[1]} ${size/2}px
                );
            `;
            break;
            
        case 'grid':
            patternCSS = `
                background-color: ${colors[0]};
                background-image: 
                    linear-gradient(${colors[1]} 1px, transparent 1px),
                    linear-gradient(90deg, ${colors[1]} 1px, transparent 1px);
                background-size: ${size}px ${size}px;
            `;
            break;
            
        case 'geometric':
        default:
            patternCSS = `
                background-color: ${colors[0]};
                background-image: 
                    linear-gradient(${rotation}deg, ${colors[1]} 25%, transparent 25%),
                    linear-gradient(${rotation - 45}deg, ${colors[1]} 25%, transparent 25%),
                    linear-gradient(${rotation}deg, transparent 75%, ${colors[1]} 75%),
                    linear-gradient(${rotation - 45}deg, transparent 75%, ${colors[1]} 75%);
                background-size: ${size}px ${size}px;
                background-position: 0 0, 0 ${size/2}px, ${size/2}px -${size/2}px, -${size/2}px 0px;
            `;
    }
    
    return patternCSS;
}

// 2. Apply pattern to element
function applyPatternToElement(element, patternConfig) {
    const patternCSS = generateCSSPattern(patternConfig);
    element.style.cssText += patternCSS;
    
    // Add opacity
    if (patternConfig.opacity < 1) {
        element.style.opacity = patternConfig.opacity;
    }
}

// 3. Generate SVG Pattern
function generateSVGPattern(config) {
    const {
        type = 'geometric',
        colors = ['#4361ee', '#3a0ca3'],
        size = 50
    } = config;
    
    let svg = `';
    return svg;
}

// 4. Create data URL for SVG pattern
function createPatternDataURL(patternConfig) {
    const svg = generateSVGPattern(patternConfig);
    const encodedSVG = encodeURIComponent(svg);
    return `data:image/svg+xml;charset=utf-8,${encodedSVG}`;
}

// 5. Apply SVG pattern as background
function applySVGPattern(element, patternConfig) {
    const dataURL = createPatternDataURL(patternConfig);
    element.style.backgroundImage = `url("${dataURL}")`;
    element.style.backgroundRepeat = 'repeat';
    element.style.backgroundSize = `${patternConfig.size}px`;
}

// 6. Dynamic pattern update on scroll (parallax effect)
function createParallaxPattern(element) {
    let scrollPosition = 0;
    
    window.addEventListener('scroll', function() {
        scrollPosition = window.pageYOffset;
        const speed = 0.5;
        const yPos = -(scrollPosition * speed);
        
        element.style.backgroundPosition = `0px ${yPos}px`;
    });
}

// 7. Pattern animation
function animatePattern(element, patternConfig) {
    let rotation = 0;
    
    function animate() {
        rotation = (rotation + 0.5) % 360;
        
        const animatedConfig = {
            ...patternConfig,
            rotation: rotation
        };
        
        applyPatternToElement(element, animatedConfig);
        requestAnimationFrame(animate);
    }
    
    animate();
}

// 8. Responsive pattern adjustment
function makePatternResponsive(element, patternConfig) {
    function adjustPatternSize() {
        const width = window.innerWidth;
        let size = patternConfig.size;
        
        if (width < 768) {
            size = size * 0.7; // Smaller pattern on mobile
        } else if (width < 1024) {
            size = size * 0.85; // Medium pattern on tablet
        }
        
        const responsiveConfig = {
            ...patternConfig,
            size: size
        };
        
        applyPatternToElement(element, responsiveConfig);
    }
    
    adjustPatternSize();
    window.addEventListener('resize', adjustPatternSize);
}

// 9. Initialize pattern on multiple elements
function initializePatterns() {
    const patternElements = document.querySelectorAll('[data-pattern]');
    
    patternElements.forEach(element => {
        const patternType = element.dataset.pattern;
        const patternColors = element.dataset.colors ? element.dataset.colors.split(',') : ['#4361ee', '#3a0ca3'];
        const patternSize = parseInt(element.dataset.size) || 50;
        
        const config = {
            type: patternType,
            colors: patternColors,
            size: patternSize
        };
        
        applyPatternToElement(element, config);
        
        // Add parallax effect if specified
        if (element.dataset.parallax === 'true') {
            createParallaxPattern(element);
        }
    });
}

// 10. Example usage
document.addEventListener('DOMContentLoaded', function() {
    // Apply pattern to body
    const bodyConfig = {
        type: 'geometric',
        colors: ['#ffffff', '#4361ee'],
        size: 80,
        opacity: 0.8
    };
    
    applyPatternToElement(document.body, bodyConfig);
    
    // Initialize all pattern elements
    initializePatterns();
    
    // Make patterns responsive
    makePatternResponsive(document.body, bodyConfig);
});