Instagram Vintage look
- Input
- Foto colorida
- Expected output
- filter: sepia(0.3) contrast(1.1) brightness(1.05) saturate(0.9);
Subtle warming with slight contrast boost. Classic editorial style.
CSS filter image effects online
CSS image effects with filter: grayscale, sepia, blur, vivid and more
The CSS `filter` property transforms images and elements without modifying the original file — everything happens in the browser's graphics compositor. The same functions used in image editors (brightness, contrast, saturation, sepia, grayscale) are available in pure CSS with a single line of code.
How filter functions interact with each other
- Filters are applied left to right in cascade. Order matters: `brightness(1.3) contrast(1.2)` produces a different result than `contrast(1.2) brightness(1.3)`. When brightness increases before contrast, contrast operates on the already-brighter image. For rich visual effects, experiment with different orders.
- `hue-rotate()` is the most powerful function for changing the "mood" of an image while preserving luminosity and saturation. A rotation of 30–60 degrees warms or cools the image depending on the original palette. 180 degrees creates the full complementary appearance.
Ready-to-copy effect presets
Night mode (dark UI)
- Input
- Imagem de interface clara
- Expected output
- filter: invert(1) hue-rotate(180deg) brightness(0.85);
Inverts the image for dark-mode contexts while preserving perceptual colors via hue-rotate.
Full tool FAQ
It's a property that applies graphic effects such as blur, color adjustment, saturation and shadow to an entire element. Works on images, text, icons and any HTML element.
Frequently asked questions
Does CSS filter work on non-image elements?
Yes. Filter applies to the entire element and its descendants. It can filter text, SVG, video, iframes and any HTML element. Blur on a container, for example, applies the blur to all inner content.
What is the difference between filter: opacity and the opacity property?
Functionally identical for simple values. The difference is that `filter: opacity()` forces a compositing context even when the value is 1 (100%), which can have performance implications. Prefer direct `opacity` for transparency control.
