CSS Filters

Imagine posting a photo to social media. Before you publish, you can apply custom photo filters: you can blur the background, adjust the brightness, turn the colors black-and-white (grayscale), or shift the color hues. CSS filters are those social media photo filters. They allow you to apply professional image editing effects directly to your webpage elements—including images, banners, and text blocks—using simple CSS properties.

In this page:

Blurring Elements with blur
Adjusting Brightness and Contrast
Desaturating into Grayscale
Rotating Hues with hue-rotate
Drop-shadow Layouts vs. box-shadow

Blurring Elements with blur

The blur() filter applies a soft, Gaussian blur to an element. It accepts pixel values (like 5px) to define the blur intensity. A higher value results in a more blurred and out-of-focus element.

Note: Use a subtle blur filter inside your dialog backdrops to create a professional frosted-glass overlay effect.

Warning: Blurring heavy, text-filled containers can make your content completely unreadable.

Example: Blurring Elements with blur

css

<style>
img {
  filter: blur(5px);
}
</style>
<img src="https://placehold.co/200x150" alt="Blurred image">

Adjusting Brightness and Contrast

The brightness() and contrast() filters accept percentage values (like 150% or 50%) to adjust the lighting of your elements. Values above 100% make the element brighter or increase contrast, while values below 100% dim or soften it.

Note: Combine subtle brightness adjustments inside hover states to build responsive image button states.

Warning: Applying extreme brightness values can wash out detail and make your images unreadable.

Example: Adjusting Brightness and Contrast

css

<style>
.bright {
  filter: brightness(150%);
}
.dim {
  filter: contrast(50%);
}
</style>
<img class="bright" src="https://placehold.co/150x100" alt="Brighter">
<img class="dim" src="https://placehold.co/150x100" alt="Lower contrast">

Desaturating into Grayscale

The grayscale() filter desaturates the colors of an element, converting them into standard black-and-white tones. It accepts percentage values from 0% (no change) to 100% (fully desaturated).

Note: Use a grayscale filter to dim non-active sponsor logos on your footer cleanly.

Warning: Applying 100% grayscale can make colored status alerts indistinguishable, so use it carefully.

Example: Desaturating into Grayscale

css

<style>
img {
  filter: grayscale(100%);
}
</style>
<img src="https://placehold.co/150x100" alt="Grayscale logo">

Rotating Hues with hue-rotate

The hue-rotate() filter shifts all the colors of an element around a 360-degree color wheel, allowing you to change color themes instantly without replacing your image assets.

Note: Use hue-rotate to quickly change the color themes of your generic UI icons.

Warning: Rotating hues can distort brand logo colors, so avoid using it on official brand images.

Example: Rotating Hues with hue-rotate

css

<style>
img {
  filter: hue-rotate(90deg);
}
</style>
<img src="https://placehold.co/150x100" alt="Hue rotated icon">

Drop-shadow Layouts vs. box-shadow

The drop-shadow() filter adds a shadow that follows the exact outline of your element, unlike the standard box-shadow property which always casts a rectangular shadow. This is incredibly useful for transparent PNG logos or vector paths.

Note: Use the drop-shadow() filter on transparent PNGs to cast realistic outlines instead of boxy rectangular shapes.

Warning: The drop-shadow filter can be more resource-heavy than standard box-shadows, so use it carefully on larger elements.

Example: Drop-shadow Layouts vs. box-shadow

css

<style>
.drop {
  filter: drop-shadow(4px 4px 6px rgba(0,0,0,0.4));
}
.box {
  background: white;
  padding: 16px;
  box-shadow: 4px 4px 6px rgba(0,0,0,0.4);
}
</style>
<img class="drop" src="https://placehold.co/100x100" alt="Follows the PNG outline">
<div class="box">Always a rectangle</div>

Common Mistakes

Using standard box-shadow properties on transparent PNG logos, which casts an ugly rectangular shadow.
Attempting to apply filters without using the correct 'filter:' property name.
Applying extreme brightness or contrast adjustments that wash out details on your images.

Chapter Summary

CSS filters allow you to apply image-editing effects (like blur, brightness, grayscale, and hue rotation) directly to elements.
Use blur() to create frosted-glass backdrops, and grayscale() to desaturate colored images cleanly.
Use the drop-shadow() filter on transparent PNGs to cast outlines that follow the exact shape of your graphic.

Browser Support

Standard CSS filter properties and drop-shadow options are supported natively by all modern web browsers.

🔒

Chapter Quiz — Complete all 22 topics to unlock

0/22 topics done

Complete these topics first:

← Previous Lesson CSS Shadows Next Lesson → CSS Blend Modes