CSS Filters

What is filter in CSS?

The filter property lets you apply graphic effects to elements, similar to Instagram filters — no image editing software needed.

It can be applied to:

Filter	What it does	Example
`blur(px)`	Adds a blur	filter: blur(5px);
`brightness(%)`	Adjusts brightness (100% = normal)	filter: brightness(150%);
`contrast(%)`	Changes contrast	filter: contrast(120%);
`grayscale(%)`	Converts to black & white	filter: grayscale(100%);
`sepia(%)`	Applies warm brownish tones	filter: sepia(100%);
`saturate(%)`	Boosts or reduces colors	filter: saturate(200%);
`invert(%)`	Inverts colors (like a negative)	filter: invert(100%);
`hue-rotate(deg)`	Shifts colors around the color wheel	filter: hue-rotate(180deg);
`drop-shadow()`	Adds shadow like box-shadow	filter: drop-shadow(5px 5px 5px gray);

img {
  width: 300px;
  filter: grayscale(100%) blur(2px);
}

This will make the image black and white with a soft blur.

img:hover {
  filter: brightness(120%) contrast(110%);
}

The image becomes brighter and more vivid when hovered.

.card {
  filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.2));
}

Adds a soft shadow to a card.

Feature	Use For
blur	Softening images or backgrounds
grayscale	Black & white effects
brightness	Light/dark adjustments
hue-rotate	Creative color changes
drop-shadow	Stylish shadows