CSS فلٹر جنریٹر

Order changes the result

Filters are applied left to right, and each one operates on the output of the one before it. That makes the list order a real setting rather than a formality.

Saturating after a greyscale conversion has nothing left to saturate — the colour is already gone. Saturating first and converting afterwards produces a different image entirely, because the greyscale step is now averaging different channel values. The same applies to brightness before or after contrast: one lifts the whole image and then stretches it, the other stretches and then lifts.

The [msm_tool slug="css-filter-generator"] combines up to ten functions into one value, and reordering them is the fastest way to get a result you cannot reach by adjusting the numbers.

The whole element is filtered

Text, borders, backgrounds and children all pass through it. Blurring a card blurs the words on it; desaturating a panel desaturates its buttons.

To filter only an image, put the filter on the image element rather than on its container. That sounds obvious and it is the single most common surprise with the property, because containers are where people naturally put styles.

Neutral values are omitted, and that is deliberate

Every function has a value at which it does nothing: brightness(100%), blur(0), grayscale(0). Anything sitting at its neutral setting is left out of the generated value rather than written as a no-op.

That is a performance decision, not tidiness. A filter list — even one that changes nothing visible — promotes the element onto its own compositing layer, which costs memory. filter: none and filter: brightness(100%) look identical and are not.

Blur is the expensive one

Its cost grows with the radius and it is recalculated whenever the element repaints. The colour functions — brightness, contrast, saturate, hue-rotate, sepia, grayscale, invert — are comparatively cheap and can be used freely.

The pattern to avoid is a large blur animated on scroll, which is a common hero-image treatment and a reliable way to make a page stutter on mid-range hardware. If you need blur to change, animate the opacity of a pre-blurred layer instead.

Percentages past 100 are allowed and often wanted

Brightness, contrast and saturate all accept values above their neutral point. saturate(150%) pushes colour beyond the original rather than only toward grey, and contrast(120%) is frequently what an image needs rather than a reduction.

Going the other way, brightness(0) is black and contrast(0) is flat grey. Both are more useful as the end point of a transition than as a static state.

drop-shadow follows the shape

This is the one function with no equivalent elsewhere. filter: drop-shadow() traces the alpha channel, so on a transparent PNG or an SVG it follows the actual silhouette. box-shadow always traces the element's rectangle.

For a logo with a transparent background, a cut-out product photograph or an icon, drop-shadow is the only one that looks right. It is more expensive than box-shadow, so use it where the shape matters and box-shadow where it does not.

backdrop-filter is a different property

Worth naming to avoid the confusion: filter affects the element and its contents; backdrop-filter affects what is behind it. They take the same functions and do opposite things.

Practical uses

1. Greyscale on hover — a logo grid that desaturates until hovered. Cheap, and it reads as deliberate.
2. Dimming a background image — brightness(0.6) under white text, which is more reliable than a semi-transparent overlay because it does not shift the colour.
3. Normalising mismatched photographs — a small saturate and contrast adjustment applied to a whole gallery pulls inconsistent source images closer together.
4. Recolouring an icon — hue-rotate on a single-colour SVG, though a CSS custom property on the fill is cleaner where you control the markup.

What it cannot fix

Brightening a dark photograph raises the noise along with the shadows. Sharpening is not available at all — there is no sharpen function — and increasing contrast is not the same thing. A filter adjusts what is in the image; it does not add information that was never captured.