💻 CSS Code Output

/* CSS Blend Mode Implementation */

/* Method 1: Using mix-blend-mode */
.blend-container {
    position: relative;
    width: 100%;
    height: 400px;
    background: #4361ee;
    overflow: hidden;
}

.background-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #4361ee;
    opacity: 1;
}

.blend-layer {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #f72585;
    mix-blend-mode: multiply;
    opacity: 1;
}

/* Method 2: Using background-blend-mode */
.blend-background {
    width: 100%;
    height: 400px;
    background: 
        linear-gradient(45deg, #4361ee, transparent),
        linear-gradient(-45deg, #f72585, transparent);
    background-blend-mode: multiply;
}

/* Method 3: With images */
.image-blend {
    width: 100%;
    height: 400px;
    background: 
        url('background.jpg'),
        linear-gradient(45deg, #f72585, transparent);
    background-size: cover;
    background-blend-mode: overlay;
}

/* Isolation for better control */
.isolated-blend {
    isolation: isolate;
}

.blend-child {
    mix-blend-mode: multiply;
}
                

    

    





    

    
    

        
Creative Design
        
Blend modes for stunning effects
    




    
    

    




    

    

    

    

        
Layered Blend Effects
    




    

    




    
    
    
        Multiply
        Screen
        Overlay
    



                

// JavaScript for Interactive Blend Modes

// 1. Dynamic Blend Mode Application
function applyBlendMode(element, blendMode, options = {}) {
    const {
        background = '#4361ee',
        foreground = '#f72585',
        opacity = 1,
        isolation = 'auto'
    } = options;
    
    element.style.cssText = `
        position: relative;
        width: 100%;
        height: 400px;
        overflow: hidden;
        isolation: ${isolation};
    `;
    
    // Create or update background layer
    let bgLayer = element.querySelector('.blend-bg');
    if (!bgLayer) {
        bgLayer = document.createElement('div');
        bgLayer.className = 'blend-bg';
        element.appendChild(bgLayer);
    }
    
    bgLayer.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: ${background};
        opacity: ${opacity};
    `;
    
    // Create or update blend layer
    let blendLayer = element.querySelector('.blend-fg');
    if (!blendLayer) {
        blendLayer = document.createElement('div');
        blendLayer.className = 'blend-fg';
        element.appendChild(blendLayer);
    }
    
    blendLayer.style.cssText = `
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: ${foreground};
        mix-blend-mode: ${blendMode};
        opacity: ${opacity};
    `;
}

// 2. Blend Mode Calculator
function calculateBlendResult(color1, color2, blendMode) {
    // Convert hex colors to RGB
    const rgb1 = hexToRgb(color1);
    const rgb2 = hexToRgb(color2);
    
    let result = { r: 0, g: 0, b: 0 };
    
    switch(blendMode) {
        case 'multiply':
            result.r = Math.round(rgb1.r * rgb2.r / 255);
            result.g = Math.round(rgb1.g * rgb2.g / 255);
            result.b = Math.round(rgb1.b * rgb2.b / 255);
            break;
            
        case 'screen':
            result.r = Math.round(255 - ((255 - rgb1.r) * (255 - rgb2.r) / 255));
            result.g = Math.round(255 - ((255 - rgb1.g) * (255 - rgb2.g) / 255));
            result.b = Math.round(255 - ((255 - rgb1.b) * (255 - rgb2.b) / 255));
            break;
            
        case 'overlay':
            result.r = rgb1.r < 128 ? 
                Math.round(2 * rgb1.r * rgb2.r / 255) :
                Math.round(255 - 2 * (255 - rgb1.r) * (255 - rgb2.r) / 255);
            result.g = rgb1.g < 128 ? 
                Math.round(2 * rgb1.g * rgb2.g / 255) :
                Math.round(255 - 2 * (255 - rgb1.g) * (255 - rgb2.g) / 255);
            result.b = rgb1.b < 128 ? 
                Math.round(2 * rgb1.b * rgb2.b / 255) :
                Math.round(255 - 2 * (255 - rgb1.b) * (255 - rgb2.b) / 255);
            break;
            
        case 'darken':
            result.r = Math.min(rgb1.r, rgb2.r);
            result.g = Math.min(rgb1.g, rgb2.g);
            result.b = Math.min(rgb1.b, rgb2.b);
            break;
            
        case 'lighten':
            result.r = Math.max(rgb1.r, rgb2.r);
            result.g = Math.max(rgb1.g, rgb2.g);
            result.b = Math.max(rgb1.b, rgb2.b);
            break;
            
        default:
            result = rgb2; // Default to foreground color
    }
    
    return rgbToHex(result.r, result.g, result.b);
}

// 3. Interactive Blend Mode Tester
class BlendModeTester {
    constructor(containerId) {
        this.container = document.getElementById(containerId);
        this.currentBlendMode = 'multiply';
        this.background = '#4361ee';
        this.foreground = '#f72585';
        this.opacity = 1;
        
        this.init();
    }
    
    init() {
        this.createUI();
        this.applyCurrentBlend();
    }
    
    createUI() {
        this.container.innerHTML = `
            

            

                

                    Background:
                    
                    
                
                

                    Foreground:
                    
                    
                
                

                    Blend Mode:
                    
                        Normal
                        Multiply
                        Screen
                        Overlay
                    
                
                

                    Opacity: 100%
                    
                
            
            

                
Result Color: #000000
                
Contrast Ratio: 1:1
            
        `;
        
        this.setupEventListeners();
    }
    
    setupEventListeners() {
        document.getElementById('bgColor').addEventListener('input', (e) => {
            this.background = e.target.value;
            document.getElementById('bgColorInput').value = this.background;
            this.update();
        });
        
        document.getElementById('fgColor').addEventListener('input', (e) => {
            this.foreground = e.target.value;
            document.getElementById('fgColorInput').value = this.foreground;
            this.update();
        });
        
        document.getElementById('blendSelect').addEventListener('change', (e) => {
            this.currentBlendMode = e.target.value;
            this.update();
        });
        
        document.getElementById('opacitySlider').addEventListener('input', (e) => {
            this.opacity = e.target.value / 100;
            document.getElementById('opacityValue').textContent = `${e.target.value}%`;
            this.update();
        });
    }
    
    update() {
        this.applyCurrentBlend();
        this.calculateResults();
    }
    
    applyCurrentBlend() {
        const preview = document.getElementById('blendPreview');
        applyBlendMode(preview, this.currentBlendMode, {
            background: this.background,
            foreground: this.foreground,
            opacity: this.opacity
        });
    }
    
    calculateResults() {
        const resultColor = calculateBlendResult(this.background, this.foreground, this.currentBlendMode);
        document.getElementById('resultColor').textContent = resultColor;
        document.getElementById('resultColor').style.color = resultColor;
        
        // Calculate contrast ratio (simplified)
        const rgb = hexToRgb(resultColor);
        const brightness = (rgb.r * 299 + rgb.g * 587 + rgb.b * 114) / 1000;
        const contrast = brightness > 128 ? 'High' : 'Low';
        document.getElementById('contrastRatio').textContent = contrast;
    }
}

// 4. Blend Mode Gallery
function createBlendModeGallery(containerId) {
    const container = document.getElementById(containerId);
    const blendModes = ['multiply', 'screen', 'overlay', 'darken', 'lighten', 'color-dodge', 'color-burn'];
    const colors = [
        ['#4361ee', '#f72585'],
        ['#3a0ca3', '#4cc9f0'],
        ['#7209b7', '#f8961e'],
        ['#f94144', '#90be6d']
    ];
    
    container.innerHTML = '';
    
    blendModes.forEach(mode => {
        colors.forEach((colorPair, index) => {
            const blendItem = document.createElement('div');
            blendItem.className = 'blend-gallery-item';
            blendItem.style.cssText = `
                position: relative;
                width: 100%;
                height: 150px;
                border-radius: 8px;
                overflow: hidden;
                cursor: pointer;
                box-shadow: var(--shadow);
                transition: transform 0.2s;
            `;
            
            blendItem.innerHTML = `
                

                

                

                    ${mode} (${index + 1})
                
            `;
            
            blendItem.addEventListener('click', () => {
                // Apply this blend mode to main preview
                selectBlendMode(mode);
                document.getElementById('bgColor').value = colorPair[0];
                document.getElementById('blendColor').value = colorPair[1];
                updateBackgroundLayer();
                updateBlendLayer();
            });
            
            blendItem.addEventListener('mouseenter', () => {
                blendItem.style.transform = 'translateY(-5px)';
                blendItem.style.boxShadow = 'var(--shadow-hover)';
            });
            
            blendItem.addEventListener('mouseleave', () => {
                blendItem.style.transform = 'translateY(0)';
                blendItem.style.boxShadow = 'var(--shadow)';
            });
            
            container.appendChild(blendItem);
        });
    });
}

// 5. Performance Optimization
function optimizeBlendPerformance() {
    // Use GPU acceleration
    const blendElements = document.querySelectorAll('[style*="mix-blend-mode"], [style*="background-blend-mode"]');
    
    blendElements.forEach(element => {
        element.style.willChange = 'transform, opacity';
        element.style.backfaceVisibility = 'hidden';
        element.style.transform = 'translateZ(0)';
    });
    
    // Limit blend mode usage on mobile
    if ('matchMedia' in window && window.matchMedia('(max-width: 768px)').matches) {
        blendElements.forEach(element => {
            const blendMode = element.style.mixBlendMode || element.style.backgroundBlendMode;
            if (blendMode && !['normal', 'multiply', 'screen'].includes(blendMode)) {
                element.style.mixBlendMode = 'normal';
                element.style.backgroundBlendMode = 'normal';
            }
        });
    }
}

// Helper functions
function hexToRgb(hex) {
    hex = hex.replace('#', '');
    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);
    return { r, g, b };
}

function rgbToHex(r, g, b) {
    return "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
}

// Initialize on page load
document.addEventListener('DOMContentLoaded', function() {
    // Create blend mode tester
    const tester = new BlendModeTester('blendDemo');
    
    // Create gallery
    createBlendModeGallery('blendGallery');
    
    // Optimize performance
    optimizeBlendPerformance();
});

// Handle responsive design
window.addEventListener('resize', optimizeBlendPerformance);
                

// SCSS/Sass Mixins for Blend Modes

// 1. Blend Mode Mixin
@mixin blend-mode($mode: multiply, $isolation: auto) {
    mix-blend-mode: $mode;
    
    @if $isolation != auto {
        isolation: $isolation;
    }
}

// 2. Background Blend Mixin
@mixin background-blend($mode: multiply, $images...) {
    background-blend-mode: $mode;
    
    @if length($images) > 0 {
        background-image: $images;
    }
}

// 3. Blend Layer Generator
@mixin blend-layer($color: #000, $opacity: 1, $blend-mode: multiply, $z-index: 1) {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: $color;
    opacity: $opacity;
    mix-blend-mode: $blend-mode;
    z-index: $z-index;
}

// 4. Color Blend Calculator Function
@function blend-colors($color1, $color2, $mode: multiply) {
    $r1: red($color1);
    $g1: green($color1);
    $b1: blue($color1);
    
    $r2: red($color2);
    $g2: green($color2);
    $b2: blue($color2);
    
    $r: 0;
    $g: 0;
    $b: 0;
    
    @if $mode == multiply {
        $r: $r1 * $r2 / 255;
        $g: $g1 * $g2 / 255;
        $b: $b1 * $b2 / 255;
    } @else if $mode == screen {
        $r: 255 - ((255 - $r1) * (255 - $r2) / 255);
        $g: 255 - ((255 - $g1) * (255 - $g2) / 255);
        $b: 255 - ((255 - $b1) * (255 - $b2) / 255);
    } @else if $mode == overlay {
        $r: if($r1 < 128, 
              2 * $r1 * $r2 / 255,
              255 - 2 * (255 - $r1) * (255 - $r2) / 255);
        $g: if($g1 < 128, 
              2 * $g1 * $g2 / 255,
              255 - 2 * (255 - $g1) * (255 - $g2) / 255);
        $b: if($b1 < 128, 
              2 * $b1 * $b2 / 255,
              255 - 2 * (255 - $b1) * (255 - $b2) / 255);
    } @else {
        $r: $r2;
        $g: $g2;
        $b: $b2;
    }
    
    @return rgb($r, $g, $b);
}

// 5. Blend Container Mixin
@mixin blend-container($width: 100%, $height: 400px, $overflow: hidden) {
    position: relative;
    width: $width;
    height: $height;
    overflow: $overflow;
    
    &::before,
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

// 6. Text Blend Effect
@mixin text-blend($color: #fff, $blend-mode: overlay, $shadow: false) {
    color: $color;
    mix-blend-mode: $blend-mode;
    
    @if $shadow {
        text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
    }
}

// 7. Gradient Blend
@mixin gradient-blend($colors..., $blend-mode: multiply, $direction: 45deg) {
    background: linear-gradient($direction, $colors);
    background-blend-mode: $blend-mode;
}

// 8. Image Overlay Blend
@mixin image-blend-overlay($image-url, $overlay-color: rgba(0, 0, 0, 0.5), $blend-mode: multiply) {
    position: relative;
    
    &::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: $overlay-color;
        mix-blend-mode: $blend-mode;
        z-index: 1;
    }
    
    &::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: url($image-url) center/cover no-repeat;
        z-index: 0;
    }
}

// 9. Animated Blend Transition
@mixin blend-transition($duration: 0.3s, $property: all) {
    transition: $property $duration cubic-bezier(0.4, 0, 0.2, 1);
    
    &:hover {
        mix-blend-mode: overlay;
    }
}

// 10. Responsive Blend Adjustments
@mixin responsive-blend($mobile-mode: normal, $tablet-mode: multiply, $desktop-mode: overlay) {
    mix-blend-mode: $mobile-mode;
    
    @media (min-width: 768px) {
        mix-blend-mode: $tablet-mode;
    }
    
    @media (min-width: 1024px) {
        mix-blend-mode: $desktop-mode;
    }
}

// Usage Examples
.blend-example {
    // Basic blend mode
    @include blend-mode(multiply, isolate);
    
    // With background blend
    @include background-blend(overlay, 
        url('image1.jpg'),
        linear-gradient(45deg, #4361ee, transparent));
    
    // Text with blend
    .blend-text {
        @include text-blend(#fff, overlay, true);
    }
    
    // Image overlay
    @include image-blend-overlay('background.jpg', rgba(#f72585, 0.5), screen);
    
    // Responsive blend
    @include responsive-blend(normal, multiply, overlay);
}

// Generate CSS classes for all blend modes
$blend-modes: normal, multiply, screen, overlay, darken, lighten, color-dodge, 
              color-burn, hard-light, soft-light, difference, exclusion, 
              hue, saturation, color, luminosity;

@each $mode in $blend-modes {
    .blend-#{$mode} {
        @include blend-mode($mode);
    }
    
    .bg-blend-#{$mode} {
        background-blend-mode: $mode;
    }
}

// Complex blend system
.blend-system {
    @include blend-container(100%, 500px);
    
    &-background {
        @include blend-layer(#4361ee, 1, normal, 1);
    }
    
    &-overlay {
        @include blend-layer(#f72585, 0.7, multiply, 2);
        @include blend-transition(0.5s, opacity);
    }
    
    &-highlight {
        @include blend-layer(#4cc9f0, 0.3, screen, 3);
    }
    
    &:hover &-overlay {
        opacity: 0.9;
        mix-blend-mode: overlay;
    }
}