night mode CSS filter image
Inverting an image with `filter: invert(1)` gets the colors wrong: what was red turns cyan, what was blue turns orange. The night-mode technique combines `invert()` with `hue-rotate(180deg)` to undo that hue swap without undoing the brightness inversion, keeping the original colors readable while the light background turns dark. This generator applies both filters in the correct order automatically.
Inverts the light background to dark while keeping the accent colors of the original interface readable.
No hue-rotate needed because there is no colored hue to preserve, just black and white swapping places.
The reduced contrast() keeps the inverted white from becoming absolute black, more comfortable in dark environments.
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.
Because 180 degrees is the full rotation that maps each hue to its complementary color on the color wheel, exactly undoing the hue shift caused by `invert()`. Any angle other than 180 would leave colors partially shifted instead of restored.
Yes, the alpha channel is unaffected. Only the RGB channels are inverted, so transparent areas stay transparent after the filter, which makes the technique safe for icons and logos in PNG.
No. `prefers-color-scheme` is a media query that detects the operating system preference and lets you write different CSS for each theme. `filter: invert()` visually transforms pixels that are already rendered, useful for static images inside an otherwise dark page, but it does not replace a real dark theme built with color variables.
filter: none;CSS is generated locally in your browser.