The filter: invert() function inverts the colour values of every pixel in an element by subtracting each channel from the maximum value in the colour space.
Loading Filter Effects Builder…
Live preview of invert() at full and partial values
Preview dark mode simulation with invert(1) on a page element
Observe partial invert for mid-range colour effects
Copy-ready invert filter declaration
Drop the Filter Effects Builder into any page — blog post, product docs, intranet, school portal — with a single line of HTML. Your visitors get the full tool, processed entirely in their browser. No backend, no uploads, no signup.
Embed code
<iframe
src="https://www.fixtools.io/css-tool/filter-effects-builder?embed=1"
width="100%"
height="780"
frameborder="0"
style="border:0;border-radius:16px;max-width:900px;"
title="Filter Effects Builder by FixTools"
loading="lazy"
allow="clipboard-write"
></iframe>Attribution-friendly: a small "Powered by FixTools" link appears in the embed footer.
The invert() function applies a per pixel colour inversion by subtracting each channel value from 1 in the 0 to 1 linear light range used by the rendering pipeline. White at (1,1,1) becomes black at (0,0,0) and vice versa across the entire image. Mid grey at (0.5,0.5,0.5) maps to mid grey, because 1 minus 0.5 equals 0.5, which means the midpoint of the luminance range maps to itself. Values between 0 and 1 interpolate between the original and the inverted output. At invert(0.5) every pixel is at exactly the mid grey value, producing a uniform flat grey across the whole element, because the original and inverted values average to 0.5 regardless of starting colour. This is why partial invert values near 0.5 do not produce interesting midtones and are rarely useful for design effects that require visible image detail. The function operates on the alpha premultiplied colour values, so semi transparent regions invert based on their visible RGB contribution rather than the underlying source colour.
Applying filter: invert(1) to the html or body element is a well known dark mode approximation that has shipped in many internal prototypes and demos. All white backgrounds become black, dark text becomes white, and the page reads as a dark on light inverted theme without requiring a coordinated custom property refactor across hundreds of stylesheets. The significant limitation is that images also invert to their photographic negatives, producing blue skies that appear orange, faces that appear blue green, and generally unrecognisable photographs that no longer convey their intended subject. Re applying filter: invert(1) to img elements inside a dark mode rule counteracts the inversion and restores photographs to their original colour appearance, because two inversions cancel mathematically. This two layer approach is a known technique for partial dark mode without writing CSS custom properties or refactoring the entire stylesheet to support theming, and it remains useful for client demos and stakeholder presentations.
Accessibility contexts for invert() include operating system level high contrast modes and browser extensions that invert page colours for users with light sensitivity, migraine triggers, or visual preferences for dark text on light backgrounds. Some users set their browser to invert all colours, making white background sites readable with dark backgrounds without any developer involvement. The filter: invert() property in CSS allows developers to opt specific elements, such as photographs, medical imaging, charts, or dark UI panels, out of the system level inversion by applying a counteracting invert(1) within a forced colors media query block. This counteraction pattern requires understanding that the operating system or browser extension inverts at the compositing level after the page renders, and a CSS filter: invert(1) on the element inverts it before reaching the system level inversion, restoring the original appearance for content that should not be flipped.
Combining invert() with hue-rotate(180deg) produces a more useful approximation of dark mode for content that contains illustrations or flat graphics. The hue rotation after inversion roughly cancels the hue shift caused by inversion, leaving the result as a dark version of the original rather than a true photographic negative. For pages with mixed content this still affects photographs poorly because hue-rotate(180deg) is not the same operation as the hue change introduced by inversion in detail, but for illustrations and UI panels the combined filter looks closer to a proper dark mode than invert(1) alone. The visual builder lets you reorder these two functions to see which produces the cleaner result for your specific content, since drag reordering produces a meaningful visible difference. Designers experimenting with quick theme variants often discover that swapping the function order shifts the perceived warmth of the resulting palette, which can be useful when tuning a prototype against a specific brand colour family.
Drag the invert slider to 1 for a complete colour negative, or set a partial value like 0.5 to observe the mid-inversion state. Copy the declaration for use as a dark mode toggle, visual effect, or accessibility aid.
Step-by-step guide to css invert filter generator:
Add invert() to the filter builder
Select invert from the function panel inside the FixTools filter effects builder. Drag the slider from 0 to 1 and watch the live preview shift from the original colours to a full photographic negative. Whites turn to black, dark text becomes white, and saturated hues rotate to their complementary partners across the panel.
Choose full or partial inversion
Set invert(1) for a complete dark mode simulation or for full colour negation across the element. Partial values between 0.05 and 0.15 produce faint tint effects on near white surfaces that can read as a subtle off white. Avoid values near 0.5, since the output collapses to a flat mid grey with no visible image detail.
Stack additional filters if needed
Add hue-rotate(180deg) after invert(1) to reduce the harsh photographic negative appearance on coloured illustrations and UI graphics. The pair behaves close to a dark theme on flat artwork while remaining wrong on photographs. Tune the hue-rotate value between 170deg and 190deg to find the variant that best matches your brand palette and reference screens.
Copy and test in context
Copy the generated filter declaration with the dedicated copy button and paste it into your stylesheet next to the element selector. For dark mode simulation, test on your actual page content including hero images, SVG icons, embedded video posters, and coloured component cards. Add a counter rule on img to re invert photographs back to their natural colours.
Common situations where this approach makes a real difference:
Quick dark mode prototype without CSS custom properties
A developer needs to quickly prototype a dark mode for a client demo without refactoring the stylesheet to use custom properties. They add a .dark-mode class to the html element with filter: invert(1) hue-rotate(180deg), then add filter: invert(1) hue-rotate(180deg) to img elements to counteract the inversion on photographs. The demo shows the dark mode concept in minutes, with images rendering correctly, sufficient to validate the direction with the client.
White logo on dark background via invert
A developer has a dark SVG logo that needs a white version for use on dark backgrounds. Rather than requesting a separate white asset from the design team, they apply filter: invert(1) to the logo image when it is inside the dark header variant. The inversion converts the dark logo to white without creating a separate file, and the approach is documented in the component code for future maintainers.
Notification badge flash animation
A web app notification badge needs to flash to attract attention when a new message arrives. A developer applies a CSS animation using invert(0) to invert(1) and back at invert(0) over 0.25s once, triggered by adding a class from JavaScript when a message is received. The flash is sharp and immediate without requiring additional colours, icons, or assets.
Accessibility override for system colour inversion
A photography site receives a report from a user on Windows High Contrast Mode where photographs are rendering as inverted negatives. The developer adds @media (forced-colors: active) { img { filter: invert(1); } } to counteract the system-level inversion on photographs, restoring normal colour rendering while the rest of the page adapts to the high contrast mode theme.
Get better results with these expert suggestions:
Use invert(1) to toggle a colour palette for a brand accent
Applying filter: invert(1) to a strongly coloured element, such as a brand-coloured button or icon, produces its photographic complement. For a dark navy brand colour, the invert is a warm gold. This is an easy way to generate a complementary accent colour from an existing brand element for use in hover states or alternate themes, though the complement may not match the brand palette precisely.
Animate invert for a flash effect on notification elements
A quick CSS animation that briefly applies invert(1) to a notification badge or alert element creates a flash-white pop that draws attention without requiring separate assets. Use @keyframes with invert(0) at 0% and 100% and invert(1) at 50%, run for 0.2s ease once, to produce a single attention-grabbing flash.
Test invert() against dark UI components, not just white backgrounds
When applying invert(1) as a dark mode technique, test against UI components that already use dark colours such as dark code blocks, dark navigation bars, and dark footer backgrounds. These components will invert to light versions, potentially conflicting with the intended dark mode appearance. Individual re-inversion of these elements may be needed.
Use forced-colors media query alongside invert for accessibility
The @media (forced-colors: active) query detects when Windows High Contrast Mode or a similar forced colour scheme is active. Combining forced-colors: active handling with invert() counteraction on images and charts ensures your content remains usable under system-level colour inversions without needing to reconstruct the entire component in high contrast mode.
Re-invert images inside a dark mode body rule
If you apply filter: invert(1) to the body for dark mode simulation, add filter: invert(1) to img to counteract the inversion and show photographs in their original colours. This two-rule pattern is a fast dark mode approximation without CSS custom properties.
invert(0.5) always produces flat grey
Due to the mathematical symmetry of inversion around the 0.5 midpoint, invert(0.5) converts all colours to their average with the inverted value, which always equals 0.5 mid-grey. This property is not useful for most design effects. Use invert(1) for full inversion or keep values near 0 or 1.
Combine invert(1) with hue-rotate(180deg) to preserve saturation
filter: invert(1) hue-rotate(180deg) inverts luminance while keeping hue relationships closer to their originals. This combination shifts the image to look like a dark version of the original rather than a photographic negative, making it more useful for dark mode style effects on illustrations and flat graphics.
More use-case guides for the same tool:
Other tools you might find useful:
Open the full Filter Effects Builder — free, no account needed, works on any device.
Open Filter Effects Builder →Free · No account needed · Works on any device