CSS Filter & Photo Effects Generator

About the CSS Filter & Photo Effects Generator

Stack CSS filter functions — blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia and drop-shadow — with a slider for each, and watch them on a sample landscape, a colour chart, a transparent cut-out or your own photo. Start from one of the presets (vivid, warm, vintage, noir, tints, glow and more), change the order of the functions, switch any of them off, or add the same function twice.

Switch to backdrop-filter to blur and tint what is behind a translucent panel instead. Copy the result as CSS (with the -webkit- prefix older Safari needs) or as Tailwind CSS v4 or v3 classes, paste an existing filter to edit it, and download the filtered picture as PNG, JPEG or WebP. Everything runs in your browser; your photo is never uploaded.

Common uses

• Giving every photo on a page the same look with one CSS rule instead of editing each image.
• Hover effects such as a grayscale thumbnail that turns colourful, or a slight brightness lift.
• Frosted-glass navigation bars, modals and cards with backdrop-filter.
• Shadows and glows that follow the outline of logos, icons and product cut-outs.
• Quick photo effects you want to keep as an image file.

What each function does

The definitions are those of the W3C Filter Effects Module Level 1, which says filter functions work in the sRGB colour space:

• brightness(a) multiplies each colour channel by a: 0% is black, 150% is one and a half times brighter (values above 100% are allowed).
• contrast(a) stretches each channel around the middle: C′ = (C − 0.5) · a + 0.5. 0% is flat grey.
• grayscale(a), sepia(a), saturate(a) and hue-rotate(θ) are colour matrices. Grayscale uses the luma weights 0.2126 R + 0.7152 G + 0.0722 B; saturate and hue-rotate use 0.213, 0.715 and 0.072. Grayscale, sepia and invert stop at 100%; saturate can go higher.
• invert(a) gives C′ = a + (1 − 2*a*) · C, so 100% is a negative and 50% is flat grey.
• opacity(a) multiplies transparency by a.
• blur(σ) is a Gaussian blur whose length is the standard deviation, so a 10px blur fades over roughly 30px.
• drop-shadow(x y σ colour) blurs the image’s alpha shape, moves it by x and y, paints it in the colour and puts it under the image. Its third length is also a standard deviation (not a box-shadow blur radius), and there is no spread or inset.

Why the order changes the result

Each function works on the output of the one before, and every result is clipped to the 0–100% range. Take a light grey of 80%: brightness(150%) clips it to 100%, then contrast(50%) makes it 75%. Swap them and contrast first gives 65%, which brightness raises to 97.5%. The same goes for colour tricks: sepia(100%) saturate(300%) hue-rotate(150deg) tints a photo teal, while hue-rotate first and sepia last ends up brown. Use the arrows in Adjust to try both.

filter or backdrop-filter

filter changes the element itself — an image, a video, a whole card with its text. backdrop-filter changes what shows through the element, so it only shows when the element’s own background is at least partly transparent; that is how frosted glass is made. Safari before version 18 needs -webkit-backdrop-filter, which the CSS output always includes. Both properties create a new stacking context, and a filtered element also becomes the containing block for position: fixed children — a fixed header inside a filtered wrapper scrolls with it.

Tailwind CSS classes

Tailwind composes its filter utilities in one fixed order: blur, brightness, contrast, grayscale, hue-rotate, invert, saturate, sepia, drop-shadow (backdrop utilities: blur, brightness, contrast, grayscale, hue-rotate, invert, opacity, saturate, sepia). When your chain follows that order the tool writes normal utilities — v4 takes any whole number, as in brightness-115, while v3 has fixed steps and gets arbitrary values like brightness-[115%] otherwise. Note that blur-sm is 4px in v3 but 8px in v4. A chain in another order, or with a function twice, becomes one arbitrary property such as [filter:sepia(100%)_hue-rotate(90deg)], which keeps your order in both versions. Tailwind has no class for the opacity() filter; the opacity-* property gives the same picture at the end of the chain.

Downloading the filtered picture

In Chrome, Edge and Firefox the image is drawn with the browser’s own canvas filters, exactly like the preview. Safari cannot filter a canvas, so there the tool applies the W3C formulas itself, off the main thread; colour functions then match the other browsers to within a level or two out of 255, and blur uses the three-box approximation the specification allows. Blur and shadow lengths are scaled with the image by default: a 4px blur on a 640px-wide preview becomes 25px on a 4000px photo, so the saved file looks like the preview. Fill the frame repeats the photo’s edge pixels under the blur so the border does not fade; Keep glow and shadow adds a transparent margin for drop shadows; Crop to the picture keeps the faded edge a blurred image has on a web page.

Limitations

• url() references to SVG filters are not supported; the tool edits the built-in filter functions only.
• Large blurs and drop shadows on big or animated elements cost a lot of rendering time, especially on phones — keep animated filters small.
• The preview shows how your browser renders the filter; other browsers can differ slightly in blur and shadow softness.
• Downloads are limited to 8,192 px on the long side and 40 megapixels so they work on phones; larger photos are scaled down.
• HEIC photos open natively in Safari; elsewhere a 1.4 MB decoder is downloaded from this site the first time you open one.

Privacy

Everything happens in your browser. What you enter or open here is not uploaded or stored by MySmartCoPilot.