CSS Filters Tutorial — Blur, Grayscale, Sepia & More

Open any photo app and tap a filter: one tap makes the photo black-and-white, another makes it warm and old-looking, another softens it into a blur. CSS gives you the same power in a single line of code. The filter property applies a visual effect to a whole element — an image, a box, even a block of text — without changing the element itself or anything around it.

Diagram — see how it fits together

What a filter does

A filter changes the pixels of an element after it has been drawn. The element keeps its size and position; only its appearance changes. This is why filters are so easy to use: you do not rearrange the page, you just restyle what is already there. One important rule — a filter on a parent affects everything inside it too, and a child cannot undo its parent's filter.

The filter functions

Each filter is a function with a value. The most useful ones are:

.soft    { filter: blur(3px); }
.bright  { filter: brightness(1.5); }
.old     { filter: sepia(80%); }
.grey    { filter: grayscale(100%); }
.strong  { filter: contrast(150%); }

blur() softens the edges, measured in pixels. brightness() takes a number — 1 is normal, 1.5 is brighter, 0.5 is darker. sepia(), grayscale() and contrast() take percentages. There are more — saturate() for colour intensity, hue-rotate() for shifting colours around the wheel, and invert() for a photo negative — but the five above cover most real designs.

Combining filters and the hover trick

Filters combine in one line, separated by spaces: filter: grayscale(100%) contrast(120%); gives a punchy black-and-white photo. The classic portfolio trick is a photo that starts in grayscale and returns to colour on hover: img { filter: grayscale(100%); } and img:hover { filter: grayscale(0%); }. Add a transition and the colour fades in smoothly instead of snapping. There is also backdrop-filter, which blurs whatever is behind an element — the frosted-glass effect you see on modern menus and cards.

Common mistakes

• Writing two filter lines in one rule — the second one wins; combine them into a single line instead.
• Forgetting the unit — blur(3) without px and sepia(80) without % are both invalid.
• Using brightness(150%) — brightness takes a plain number like 1.5, not a percentage.
• Trying to un-filter a child of a filtered parent — the child is already inside the filtered picture and cannot escape it.
• Overdoing blur on large areas — a heavy blur on a big image is slow to draw on cheap phones, so keep blurs small.

Remember

• filter changes an element's pixels, not its size or position.
• blur() softens, brightness() lightens or darkens, grayscale() removes colour, sepia() ages a photo.
• Combine filters in one line, separated by spaces.
• A parent's filter covers all its children, and a child cannot undo it.
• Grayscale-to-colour on hover is the classic portfolio trick — add a transition for a smooth fade.

Example explained

• .blur { filter: blur(3px); } — the first box is softly blurred, like a photo taken slightly out of focus.
• .bright { filter: brightness(1.5); } — the second box is half as bright again, so its colour looks washed towards white.
• .gray { filter: grayscale(100%); } — the third box loses all colour and becomes pure black-and-white.
• .sepia { filter: sepia(80%); } — the fourth box turns warm and brownish, like an old photograph.
• .portrait:hover { filter: grayscale(0%); } — the big box starts black-and-white and returns to full colour when you hover over it in a browser.