CSS Image Filters

Common Filter Effects

img {
    filter: blur(3px);
}

img {
    filter: brightness(1.5);
}

img {
    filter: contrast(1.3);
}

img {
    filter: saturate(2);
}

🔹 Basic Filter Effects

Basic CSS filter effects allow developers to apply visual adjustments directly through code without image editing software. These include blur, brightness, contrast, and grayscale filters that can be applied to any HTML element. For example, the filter: blur(5px) property creates a Gaussian blur effect, while filter: brightness(150%) increases an element's luminosity. These real-time visual modifications enhance user interface feedback, create depth perception, and improve visual hierarchy. Filters can be combined with CSS transitions to create smooth animations, such as gradually blurring background content when modal windows appear.

/* Blur Effect */
.blur-effect {
    filter: blur(2px);
}

/* Brightness (1 = normal, >1 = brighter, <1 = darker) */
.bright-effect {
    filter: brightness(1.4);
}

.dark-effect {
    filter: brightness(0.7);
}

/* Contrast (1 = normal, >1 = more contrast, <1 = less contrast) */
.high-contrast {
    filter: contrast(1.5);
}

/* Grayscale (0 = normal, 1 = full grayscale) */
.grayscale-effect {
    filter: grayscale(1);
}

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
    <img src="/placeholder.png" alt="Original">
    <img src="/placeholder.png" alt="Blur" class="blur-effect">
    <img src="/placeholder.png" alt="Bright" class="bright-effect">
</div>

Output:

Original

Blur

Bright

🔹 Color Manipulation Filters

Color manipulation filters transform color schemes dynamically using CSS properties like sepia, hue-rotate, and saturate. The filter: sepia(100%) property creates vintage photographic effects by converting colors to brownish tones. Meanwhile, filter: hue-rotate(90deg) shifts all colors along the color wheel, enabling theme switching without multiple image assets. These filters are particularly valuable for creating consistent branding across diverse content while maintaining performance efficiency. Advanced applications include creating dark mode variations, generating color-coded status indicators, and implementing artistic visual styles that respond to user interactions.

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

/* Sepia Effect (0-1) */
.sepia-effect {
    filter: sepia(0.8);
}

/* Invert Colors (0-1) */
.invert-effect {
    filter: invert(1);
}

/* Saturate Colors (0 = grayscale, 1 = normal, >1 = oversaturated) */
.oversaturated {
    filter: saturate(2.5);
}

.desaturated {
    filter: saturate(0.3);
}

<div style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;">
    <div>
        <img src="/placeholder.png" alt="Sepia" class="sepia-effect">
        <p>Sepia Effect</p>
    </div>
    <div>
        <img src="/placeholder.png" alt="Hue Shift" class="hue-shift">
        <p>Hue Rotation</p>
    </div>
</div>

Output:

Sepia Effect

Hue Rotation

🔹 Combining Multiple Filters

Combining multiple CSS filters enables sophisticated visual effects through additive property chaining. Developers can apply several filter functions simultaneously by listing them in sequence: filter: blur(2px) brightness(120%) contrast(110%) sepia(30%). This creates complex visual treatments that would require multiple image versions or graphic software. The order of operations matters significantly—applying blur before brightness yields different results than the reverse sequence. This technique is essential for creating cohesive design systems, implementing advanced hover states, and developing immersive user experiences without compromising page load performance.

/* Instagram-style filters */
.vintage-filter {
    filter: sepia(0.3) contrast(1.2) brightness(1.1) saturate(1.3);
}

.dramatic-filter {
    filter: contrast(1.4) brightness(0.9) saturate(1.6) hue-rotate(10deg);
}

.cool-filter {
    filter: brightness(1.1) contrast(1.2) saturate(0.8) hue-rotate(200deg);
}

/* Hover effects with transitions */
.filter-hover {
    filter: grayscale(1);
    transition: filter 0.3s ease;
}

.filter-hover:hover {
    filter: grayscale(0) brightness(1.1) contrast(1.1);
}

<div style="display: grid; grid-template-columns: repeat(3, 1fr); gap: 15px;">
    <img src="/placeholder.png" 
         alt="Vintage" 
         class="vintage-filter">
    <img src="/placeholder.png" 
         alt="Dramatic" 
         class="dramatic-filter">
    <img src="/placeholder.png" 
         alt="Cool" 
         class="cool-filter">
</div>

Output:

🔹 Advanced Filter Effects

Advanced CSS filter effects leverage SVG filter primitives and backdrop-filter properties for complex visual manipulations. Beyond basic functions, developers can create custom filters using SVG's <filter> element and reference them via filter: url(#custom-filter). The backdrop-filter property applies effects to content behind an element, enabling frosted glass effects and depth-based visual treatments. These advanced capabilities support sophisticated user interface designs, including immersive storytelling experiences, data visualization enhancements, and accessibility improvements for users with visual impairments through contrast and color manipulation.

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

/* URL Filter (for custom SVG filters) */
.custom-filter {
    filter: url(#custom-svg-filter);
}

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

/* Animation with filters */
.animated-filter {
    filter: hue-rotate(0deg);
    animation: rainbow 3s linear infinite;
}

@keyframes rainbow {
    0% { filter: hue-rotate(0deg); }
    100% { filter: hue-rotate(360deg); }
}

<div style="position: relative; padding: 20px;">
    <img src="/placeholder.png" 
         alt="Drop Shadow" 
         class="drop-shadow-effect">
</div>

Output: