Skip to content

Instantly share code, notes, and snippets.

@yoshuawuyts
Last active May 7, 2025 23:13
Show Gist options
  • Save yoshuawuyts/7cbad7e97ffcb349a9f43ac2cb70d6d3 to your computer and use it in GitHub Desktop.
Save yoshuawuyts/7cbad7e97ffcb349a9f43ac2cb70d6d3 to your computer and use it in GitHub Desktop.
:root {
--image-color: #1a1a1a;
--image-effect: brightness(0) saturate(100%) invert(3%) sepia(7%) saturate(323%) hue-rotate(314deg) brightness(97%) contrast(86%);
@media (prefers-color-scheme: dark) {
--image-color: #dadada;
--image-effect: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(1631%) hue-rotate(243deg) brightness(110%) contrast(71%);
}
}
img:not([src*=".jpeg"]):not([src*=".jpg"]):not([src*=".bmp"]):not([src*=".tiff"]):not([src*=".webp"]) {
filter: var(--image-effect);
}
svg {
color: color-mix(in srgb, var(--image-color) 60%, transparent);
}
@yoshuawuyts
Copy link
Author

CSS filter generated with: https://angel-rs.github.io/css-color-filter-generator/ - takes an RGB color code, outputs a filter

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment