Question 1

How do I blur an image with CSS?

Accepted Answer

Apply filter: blur(8px) to the img element. Increase the pixel value for stronger blur. To blur on hover, use transition: filter 0.3s ease and set filter: blur(0) on the hover state.

Question 2

filter vs backdrop-filter — what's the difference?

Accepted Answer

filter applies effects to the element itself (the image, text, or box). backdrop-filter applies effects to whatever is rendered behind the element, visible through its transparent area. Use filter to blur an image; use backdrop-filter to create a frosted-glass panel.

Question 3

Does the order of filter functions matter?

Accepted Answer

Yes. Filters apply left to right. filter: blur(4px) brightness(1.5) blurs first then brightens; filter: brightness(1.5) blur(4px) brightens then blurs. The visual difference is small for subtle values but pronounced for heavy ones.

Question 4

Why is my CSS filter making text look fuzzy?

Accepted Answer

Any non-zero filter creates a new stacking context and triggers GPU rasterization which can resample text. Avoid applying filters to elements containing text. If you must, set backface-visibility: hidden and transform: translateZ(0) on the parent.

Question 5

How do I make a black-and-white image with CSS?

Accepted Answer

Use filter: grayscale(100%). Combine with filter: grayscale(100%) contrast(1.1) for a richer look. Toggle to color on hover with :hover { filter: grayscale(0); } and a transition.

Question 6

Are CSS filters performant?

Accepted Answer

Yes — filters are GPU-accelerated and fast for hover states and transitions. Avoid animating blur() with large radii on full-screen elements; the per-frame rasterization is expensive.

Guía Completa de Filtros CSS

Todos los Filtros Disponibles

Casos de Uso Prácticos

Preguntas Frecuentes