CSS Filters — blur, brightness, contrast, drop-shadow

The filter Property

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.

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); }
}

Key Takeaways

CSS filters apply visual effects to elements - blur, brightness, contrast, grayscale, and more.
Multiple filters can be chained: filter: blur(2px) brightness(1.2) contrast(1.1).
backdrop-filter applies filters to the area behind an element - great for frosted glass effects.
CSS filters are GPU-accelerated - they are performant for animations.
filter: drop-shadow() respects transparency unlike box-shadow which follows the box model.
Use filter: grayscale(1) to create a disabled or inactive state for images.

CSS Filters — blur, brightness, contrast, drop-shadow

The filter Property

Level Up Your Css Skills

Popular Tutorials

Ready to Level Up Your Skills?