The filter property applies visual effects to an element. The mix-blend-mode property blends an element with what is behind it. Together they replace many image editing tasks.

Filter functions

• blur(): softens the element.
• brightness() and contrast(): adjust light and contrast.
• grayscale() and sepia(): color effects.
• saturate() and hue-rotate(): change colors.
• invert(): inverts colors, useful for dark mode icons.
• drop-shadow(): adds a shadow that follows the shape of transparent images.

Grayscale image that shows color on hover

.lotgrafix-gallery img {
    filter: grayscale( 100% );
    transition: filter 0.3s ease;
}

.lotgrafix-gallery img:hover {
    filter: grayscale( 0 );
}

Combine several filters

.lotgrafix-photo {
    filter: contrast( 1.1 ) saturate( 1.3 ) brightness( 0.95 );
}

Shadow for a PNG or SVG logo

.lotgrafix-logo {
    filter: drop-shadow( 0 4px 8px rgba( 0, 0, 0, 0.3 ) );
}

Color overlay on an image with mix-blend-mode

.lotgrafix-hero {
    position: relative;
    background: url( hero.jpg ) center / cover;
}

.lotgrafix-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: orangered;
    mix-blend-mode: multiply;
}

Common blend modes

• multiply: darkens, great for color overlays.
• screen: lightens.
• overlay: increases contrast.
• difference: creates inverted effects.