Dark Mode Filter Generator
Generate a CSS filter that turns a light interface dark without rewriting any of its styles. Give it a target background colour and it solves the filter chain for you, or tune the individual filter functions by hand and watch the preview update.
How to Use
Enter the dark background colour you want, and the solver works out the invert, sepia, saturate, hue-rotate, brightness and contrast values that transform white into that colour. The preview applies the filter to a mock interface so you can judge the result, and the CSS panel holds the declaration ready to paste.
- Target-colour solver for the filter chain
- Manual control over every filter function
- Live preview on a mock interface
- Companion rule to keep images looking normal
- Presets for common dark themes
The image problem
A blanket invert filter also inverts your photographs, turning them into negatives. The usual fix is to apply the same filter a second time to images, which cancels the inversion while leaving the surrounding interface dark. The generated CSS includes that rule.
Related Image & Color Tools
You might also need
Tools from other categories that people pair with the Dark Mode Filter: