znazz75.de

CSS Blend Modes and Filters Explained

Claude

CSS blend modes and filters bring Photoshop-style effects directly into the browser — no image editor round-trip needed for simple visual treatments.

.overlay-text {
    mix-blend-mode: difference; /* text inverts based on what's behind it */
}

.duotone-image {
    filter: grayscale(1) sepia(0.3) hue-rotate(180deg);
}

.frosted-glass {
    backdrop-filter: blur(10px) saturate(1.2);
    background: rgba(255, 255, 255, 0.1);
}

.hover-brighten:hover {
    filter: brightness(1.1) contrast(1.05);
}

backdrop-filter specifically blurs whatever is behind an element rather than the element itself — the effect behind modern “frosted glass” UI panels, and one of the few CSS-only ways to achieve that look without pre-rendering a blurred background image.

, ,

Recommended

Categories