Filters

Code

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

/* Brightness */
.bright { filter: brightness(1.5); }
.dark { filter: brightness(0.5); }

/* Contrast */
.contrast { filter: contrast(200%); }

/* Grayscale */
.grayscale { filter: grayscale(100%); }

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

/* Invert */
.invert { filter: invert(100%); }

/* Saturate */
.saturate { filter: saturate(200%); }
.desaturate { filter: saturate(50%); }

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

/* Multi-filter combo */
.vintage {
    filter: sepia(50%) contrast(110%) brightness(90%) saturate(80%);
}

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

/* drop-shadow */
.png-shadow {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

/* backdrop-filter (background blur) */
.glass {
    backdrop-filter: blur(10px);
    background: rgba(255, 255, 255, 0.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

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

Explanation

filter provides various image filters; backdrop-filter blurs the background for a frosted glass effect.

More CSS Snippets