filter changes an element’s rendered image, including its background, border, and descendants. It does not change the underlying image file or the element’s layout dimensions.
Remove color from an image
Grayscale(1) removes its color; grayscale(.5) would apply half the effect. The original is shown for comparison, and both use the same embedded artwork.
HTML and CSS
HTML
<p>Original</p>
<img
class=""
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>
<p>Grayscale</p>
<img
class="filtered"
src="data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22300%22%20height%3D%22100%22%3E%3Crect%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%232563eb%22%2F%3E%3Crect%20x%3D%22150%22%20width%3D%22150%22%20height%3D%22100%22%20fill%3D%22%230f766e%22%2F%3E%3Ccircle%20cx%3D%2240%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3Ccircle%20cx%3D%22260%22%20cy%3D%2250%22%20r%3D%2224%22%20fill%3D%22white%22%2F%3E%3C%2Fsvg%3E"
alt="Two colored halves with white circles near the outer edges"
/>CSS
img {
width: 240px;
max-width: 100%;
display: block;
}
.filtered {
filter: grayscale(1);
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Follow an SVG shape with a shadow
Drop-shadow follows the rendered alpha shape. The empty space around the triangle remains empty; box-shadow would shadow its rectangular box instead.
HTML and CSS
HTML
<svg viewbox="0 0 130 110" role="img" aria-label="Blue triangle with a shadow">
<path d="M65 10 L115 90 H15 Z" fill="#2563eb"></path>
</svg>CSS
svg {
width: 130px;
height: 110px;
margin: 1rem;
filter: drop-shadow(8px 8px 3px #475569);
}Edit HTML or CSS to update the preview as you type. Copy code snippet copies the selected tab. Preview spacing and font defaults are not included.
Values and defaults
The initial value is none and filter is not inherited. Functions include blur(3px), brightness(1.2), contrast(150%), grayscale(.5), hue-rotate(90deg), invert(1), opacity(.5), saturate(1.3), and sepia(1). Url(#id) can reference an SVG filter defined in the document.
Functions run in declaration order; swapping two functions can change the result. Blur uses a nonnegative length. Drop-shadow takes two offsets, an optional nonnegative blur length, and a color; it has no spread or inset parameter. Invalid function arguments can invalidate the entire filter declaration.
Common mistakes
A filter on a card also filters its text and controls. Graying out a button does not disable it: use the native disabled attribute and an explanation. A non-none filter creates a stacking context and can change the containing block for positioned descendants. Large animated filters can be costly; measure the actual page before adding promotion hints.
Use backdrop-filter for pixels behind the element, and box-shadow for a rectangular shadow.
Sources and browser support
MDN: filter describes the syntax and links to the specification and compatibility data. Check individual values in that table when supporting older browsers.