CSS Filters blur, brightness, contrast, drop shadow

The filter Property

CSS filters apply visual effects after an element is painted. They are useful for image treatments, hover states, disabled previews, icon shadows, frosted glass panels, and subtle UI feedback.

Filters can make a design feel polished, but they should be used carefully. Heavy blur, large drop shadows, and backdrop-filter can cost performance on low-powered devices, especially when animated or applied to large areas.

The filter property applies visual effects to an element - blur, brightness, contrast, grayscale, and more. Filters are applied to the entire element including its children.

Multiple filters are applied from left to right. That means filter: grayscale(1) brightness(1.2) can look different from filter: brightness(1.2) grayscale(1) depending on the effect combination.

Function	Values	Description
blur(radius)	5px	Gaussian blur
brightness(amount)	0.5 \| 1.5 \| 150%	Darken/lighten (1 = normal)
contrast(amount)	0.5 \| 2 \| 200%	Reduce/increase contrast
grayscale(amount)	0 \| 1 \| 100%	Convert to grayscale
hue-rotate(angle)	90deg \| 180deg	Rotate hue wheel
invert(amount)	0 \| 1 \| 100%	Invert colors
opacity(amount)	0 \| 0.5 \| 1	Transparency (GPU-accelerated)
saturate(amount)	0 \| 1 \| 2	Reduce/increase saturation
sepia(amount)	0 \| 1 \| 100%	Sepia tone effect
drop-shadow()	like box-shadow	Shadow following element shape

filter Functions - Examples

/* Individual filters */
.blur       { filter: blur(4px); }
.bright     { filter: brightness(1.5); }
.dark       { filter: brightness(0.5); }
.contrast   { filter: contrast(2); }
.grayscale  { filter: grayscale(1); }
.hue        { filter: hue-rotate(90deg); }
.invert     { filter: invert(1); }
.saturate   { filter: saturate(3); }
.sepia      { filter: sepia(0.8); }

/* drop-shadow - follows element shape (unlike box-shadow) */
.icon-shadow {
    filter: drop-shadow(2px 4px 6px rgba(0,0,0,0.3));
}
/* Great for PNG images with transparency */
.logo {
    filter: drop-shadow(0 4px 8px rgba(0,0,0,0.2));
}

/* Multiple filters - space separated */
.vintage {
    filter: sepia(0.5) contrast(1.2) brightness(0.9);
}
.cool-blue {
    filter: hue-rotate(200deg) saturate(1.5);
}

/* Hover effects */
.photo {
    filter: grayscale(1);
    transition: filter 0.4s ease;
}
.photo:hover { filter: grayscale(0); }

.card-img {
    filter: brightness(0.8);
    transition: filter 0.3s;
}
.card:hover .card-img { filter: brightness(1); }

/* backdrop-filter - blur behind element */
.glass-card {
    background: rgba(255, 255, 255, 0.2);
    backdrop-filter: blur(10px) saturate(1.5);
    -webkit-backdrop-filter: blur(10px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: 12px;
}

/* Frosted glass navbar */
.navbar-glass {
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

/* Dark mode image adjustment */
@media (prefers-color-scheme: dark) {
    img { filter: brightness(0.85) contrast(1.05); }
}

filter vs backdrop-filter

filter changes the element itself. backdrop-filter changes what is visible behind the element, which is why it is used for glass-like panels and translucent navigation bars. For backdrop-filter to be visible, the element normally needs a transparent or semi-transparent background.

Use filter on images, icons, cards, and direct visual elements.
Use backdrop-filter on overlays that sit above other content.
Avoid applying large animated blur effects to full pages.
Test readability after brightness, contrast, and blur changes.

Readable image overlay with brightness filter

.hero {
    position: relative;
    overflow: hidden;
}

.hero img {
    width: 100%;
    display: block;
    filter: brightness(0.65) contrast(1.05);
}

.hero-title {
    position: absolute;
    inset: auto 2rem 2rem;
    color: white;
}