🎨 Filters & Blend Modes

Visual Effects & Compositing

CSS Filters & Blend Modes

Apply visual effects to elements without image editing software. Filters and blend modes enable creative designs directly in CSS.

💻 Filter Functions

blur()

/* Gaussian blur */
.blur {
    filter: blur(5px);
}

.blur-light {
    filter: blur(2px);
}

.blur-heavy {
    filter: blur(10px);
}

/* Backdrop blur (blurs background) */
.glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}

brightness()

/* Adjust brightness */
.bright {
    filter: brightness(150%);  /* 150% = brighter */
}

.dark {
    filter: brightness(50%);   /* 50% = darker */
}

.normal {
    filter: brightness(100%);  /* 100% = no change */
}

/* Values: 0% (black) to 100%+ (brighter) */

contrast()

/* Adjust contrast */
.high-contrast {
    filter: contrast(200%);    /* Higher contrast */
}

.low-contrast {
    filter: contrast(50%);     /* Lower contrast */
}

.normal {
    filter: contrast(100%);    /* No change */
}

/* Values: 0% (gray) to 100%+ (more contrast) */

grayscale()

/* Convert to grayscale */
.grayscale {
    filter: grayscale(100%);   /* Full grayscale */
}

.partial-gray {
    filter: grayscale(50%);    /* 50% gray */
}

.color {
    filter: grayscale(0%);     /* Full color */
}

/* Hover effect */
.image {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.image:hover {
    filter: grayscale(0%);
}

sepia()

/* Sepia tone effect */
.sepia {
    filter: sepia(100%);       /* Full sepia */
}

.vintage {
    filter: sepia(60%);        /* Vintage look */
}

/* Old photo effect */
.old-photo {
    filter: sepia(80%) contrast(120%) brightness(90%);
}

saturate()

/* Adjust color saturation */
.vibrant {
    filter: saturate(200%);    /* More saturated */
}

.desaturated {
    filter: saturate(50%);     /* Less saturated */
}

.normal {
    filter: saturate(100%);    /* No change */
}

/* 0% = grayscale, 100%+ = more vivid */

hue-rotate()

/* Rotate color hue */
.hue-90 {
    filter: hue-rotate(90deg);
}

.hue-180 {
    filter: hue-rotate(180deg);  /* Complementary colors */
}

.hue-270 {
    filter: hue-rotate(270deg);
}

/* Full rotation */
.hue-360 {
    filter: hue-rotate(360deg);  /* Back to original */
}

/* Animated rainbow */
@keyframes rainbow {
    to { filter: hue-rotate(360deg); }
}

.rainbow {
    animation: rainbow 3s linear infinite;
}

invert()

/* Invert colors */
.inverted {
    filter: invert(100%);      /* Full inversion */
}

.partial-invert {
    filter: invert(50%);       /* 50% inverted */
}

/* Dark mode images */
@media (prefers-color-scheme: dark) {
    img {
        filter: invert(100%) hue-rotate(180deg);
    }
}

opacity()

/* Adjust opacity (similar to opacity property) */
.transparent {
    filter: opacity(50%);
}

.visible {
    filter: opacity(100%);
}

/* Note: opacity property is usually preferred */
.better {
    opacity: 0.5;
}

drop-shadow()

/* Drop shadow (follows alpha channel) */
.shadow {
    filter: drop-shadow(2px 2px 4px rgba(0,0,0,0.5));
}

/* Multiple shadows */
.multiple {
    filter: 
        drop-shadow(2px 2px 4px rgba(0,0,0,0.3))
        drop-shadow(0 0 10px rgba(0,123,255,0.5));
}

/* Better for PNGs with transparency */
.logo {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

🎨 Combining Filters

/* Multiple filters (space-separated) */
.combined {
    filter: brightness(110%) contrast(120%) saturate(130%);
}

/* Instagram-style filters */
.instagram-valencia {
    filter: contrast(108%) brightness(108%) sepia(8%);
}

.instagram-nashville {
    filter: sepia(20%) contrast(120%) brightness(105%) saturate(120%);
}

.instagram-clarendon {
    filter: contrast(120%) saturate(125%);
}

.instagram-gingham {
    filter: brightness(105%) hue-rotate(-10deg);
}

/* Retro effect */
.retro {
    filter: 
        sepia(60%)
        contrast(110%)
        brightness(90%)
        hue-rotate(-10deg)
        saturate(120%);
}

/* Dramatic effect */
.dramatic {
    filter: 
        contrast(150%)
        brightness(90%)
        saturate(80%);
}

/* Faded effect */
.faded {
    filter: 
        brightness(110%)
        saturate(70%)
        contrast(90%);
}

🌫️ Backdrop Filters

/* Apply filter to background */
.backdrop-blur {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.1);
}

/* Glassmorphism */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Dark glass */
.dark-glass {
    background: rgba(0, 0, 0, 0.3);
    backdrop-filter: blur(10px) brightness(80%);
    border-radius: 12px;
}

/* Frosted glass */
.frosted {
    backdrop-filter: blur(8px) saturate(200%);
    background: rgba(255, 255, 255, 0.7);
}

/* All backdrop filters */
.all-backdrop {
    backdrop-filter: 
        blur(5px)
        brightness(110%)
        contrast(120%)
        grayscale(0%)
        hue-rotate(0deg)
        invert(0%)
        opacity(100%)
        saturate(100%)
        sepia(0%);
}

🎭 Blend Modes

mix-blend-mode

/* Element blends with background */
.blend {
    mix-blend-mode: normal;      /* Default */
    mix-blend-mode: multiply;
    mix-blend-mode: screen;
    mix-blend-mode: overlay;
    mix-blend-mode: darken;
    mix-blend-mode: lighten;
    mix-blend-mode: color-dodge;
    mix-blend-mode: color-burn;
    mix-blend-mode: hard-light;
    mix-blend-mode: soft-light;
    mix-blend-mode: difference;
    mix-blend-mode: exclusion;
    mix-blend-mode: hue;
    mix-blend-mode: saturation;
    mix-blend-mode: color;
    mix-blend-mode: luminosity;
}

/* Common uses */
.overlay-text {
    mix-blend-mode: multiply;
    color: white;
}

.glow-text {
    mix-blend-mode: screen;
    color: cyan;
}

.contrast-text {
    mix-blend-mode: difference;
    color: white;
}

background-blend-mode

/* Blend multiple backgrounds */
.blend-bg {
    background: 
        linear-gradient(to right, red, blue),
        url('image.jpg');
    background-blend-mode: multiply;
}

/* Colored overlay on image */
.tinted-image {
    background: 
        linear-gradient(rgba(0, 123, 255, 0.5), rgba(0, 123, 255, 0.5)),
        url('photo.jpg');
    background-blend-mode: overlay;
    background-size: cover;
}

/* Multiple blend modes */
.complex {
    background: 
        linear-gradient(to right, red, transparent),
        linear-gradient(to bottom, blue, transparent),
        url('image.jpg');
    background-blend-mode: screen, multiply;
}

isolation

/* Create new stacking context for blend modes */
.isolated {
    isolation: isolate;
}

/* Prevents blend mode from affecting parent */
.container {
    isolation: isolate;
}

.container .child {
    mix-blend-mode: multiply;
    /* Only blends with siblings, not parent */
}

🎯 Practical Examples

/* Image hover effects */
.image-gallery img {
    filter: grayscale(100%);
    transition: filter 0.3s;
}

.image-gallery img:hover {
    filter: grayscale(0%) brightness(110%);
}

/* Loading state */
.loading {
    filter: blur(5px) brightness(80%);
    pointer-events: none;
}

/* Disabled state */
.disabled {
    filter: grayscale(100%) opacity(50%);
    cursor: not-allowed;
}

/* Dark mode image adjustment */
@media (prefers-color-scheme: dark) {
    img:not(.logo) {
        filter: brightness(80%) contrast(120%);
    }
}

/* Hero section with overlay */
.hero {
    background: url('hero.jpg');
    background-size: cover;
    background-position: center;
    position: relative;
}

.hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(0,0,0,0.5), rgba(0,0,0,0.8));
    mix-blend-mode: multiply;
}

/* Glassmorphism card */
.glass-card {
    background: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(20px) saturate(180%);
    border-radius: 20px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    padding: 2rem;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

/* Text with background blend */
.blend-text {
    background: 
        linear-gradient(45deg, #ff6b6b, #4ecdc4),
        url('texture.jpg');
    background-blend-mode: screen;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-size: 4rem;
    font-weight: bold;
}

/* Duotone effect */
.duotone {
    position: relative;
}

.duotone::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
    mix-blend-mode: screen;
}

.duotone img {
    filter: grayscale(100%) contrast(100%) brightness(100%);
    mix-blend-mode: multiply;
}

/* Neon glow effect */
.neon {
    color: #fff;
    filter: 
        drop-shadow(0 0 10px currentColor)
        drop-shadow(0 0 20px currentColor)
        drop-shadow(0 0 40px currentColor);
}

/* Animated filter */
@keyframes pulse-glow {
    0%, 100% {
        filter: brightness(100%) saturate(100%);
    }
    50% {
        filter: brightness(120%) saturate(150%);
    }
}

.pulsing {
    animation: pulse-glow 2s ease-in-out infinite;
}

/* Photo filter presets */
.filter-warm {
    filter: sepia(30%) saturate(130%) brightness(105%);
}

.filter-cold {
    filter: hue-rotate(-10deg) saturate(110%) brightness(95%);
}

.filter-vintage {
    filter: sepia(50%) contrast(120%) brightness(90%);
}

.filter-dramatic {
    filter: contrast(150%) saturate(80%) brightness(90%);
}

/* Modal backdrop */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(5px);
}

/* Navigation with glass effect */
nav {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px) saturate(180%);
    border-bottom: 1px solid rgba(255, 255, 255, 0.3);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}

/* Colored shadow with drop-shadow */
.colored-shadow {
    filter: drop-shadow(0 10px 20px rgba(102, 126, 234, 0.5));
}

/* SVG icon color change */
.icon {
    filter: brightness(0) saturate(100%) invert(27%) sepia(98%) saturate(7471%) hue-rotate(243deg) brightness(101%) contrast(104%);
}

/* Text outline effect */
.outline-text {
    color: transparent;
    filter: 
        drop-shadow(1px 0 0 white)
        drop-shadow(-1px 0 0 white)
        drop-shadow(0 1px 0 white)
        drop-shadow(0 -1px 0 white);
}

/* Image comparison (before/after) */
.before-after {
    position: relative;
}

.before-after .after {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    overflow: hidden;
}

.before-after .before {
    filter: grayscale(100%);
}

/* Hover state transitions */
.card {
    transition: filter 0.3s;
}

.card:hover {
    filter: brightness(110%) saturate(120%);
}

/* Focus indicator with filter */
button:focus-visible {
    outline: none;
    filter: brightness(110%) drop-shadow(0 0 0 3px rgba(0,123,255,0.5));
}

💡 Performance Tips

/* 1. Use will-change for animated filters */
.animated-filter {
    will-change: filter;
}

.animated-filter:hover {
    filter: blur(5px) brightness(110%);
}

/* 2. Minimize filter complexity */
/* Bad - many filters */
.heavy {
    filter: 
        blur(5px)
        brightness(110%)
        contrast(120%)
        saturate(130%)
        hue-rotate(10deg);
}

/* Better - only necessary filters */
.light {
    filter: brightness(110%) saturate(120%);
}

/* 3. Use transforms for simple effects when possible */
/* Expensive */
.fade {
    filter: opacity(50%);
}

/* Better */
.fade {
    opacity: 0.5;
}

/* 4. Avoid animating backdrop-filter */
/* Expensive */
.modal {
    backdrop-filter: blur(0px);
    transition: backdrop-filter 0.3s;
}

.modal.open {
    backdrop-filter: blur(10px);
}

/* Better - fade in pre-blurred element */
.modal {
    backdrop-filter: blur(10px);
    opacity: 0;
    transition: opacity 0.3s;
}

.modal.open {
    opacity: 1;
}

/* 5. Test on lower-end devices */
/* Filters can be GPU-intensive */

/* 6. Provide fallbacks */
.glass {
    background: rgba(255, 255, 255, 0.8);  /* Fallback */
    backdrop-filter: blur(10px);
}

@supports not (backdrop-filter: blur(10px)) {
    .glass {
        background: rgba(255, 255, 255, 0.95);
    }
}

🎯 Key Takeaways