Robert Birming

Image filters

An add-on that applies CSS filters to any image using a simple URL fragment. A bunch of moods and styles, one # away.1

Preview

Stockholm Stockholm Stockholm Stockholm Stockholm Stockholm

How to use

Add a filter name after a # at the end of your image URL.

Markup

![Your image](https://example.com/image.jpg#sepia)
![Your image](https://example.com/image.jpg#mono)
![Your image](https://example.com/image.jpg#invert)
![Your image](https://example.com/image.jpg#fade)
![Your image](https://example.com/image.jpg#warm)
![Your image](https://example.com/image.jpg#cool)

Styles

/* Image filters | robertbirming.com */
img[src*="#sepia"] {
  filter: sepia(1);
}

img[src*="#mono"] {
  filter: grayscale(1);
}

img[src*="#invert"] {
  filter: invert(1);
}

img[src*="#fade"] {
  filter: grayscale(0.2) brightness(1.1) contrast(0.85) saturate(0.8);
}

img[src*="#warm"] {
  filter: saturate(1.3) brightness(1.05) hue-rotate(-10deg);
}

img[src*="#cool"] {
  filter: saturate(0.7) hue-rotate(45deg) brightness(1.08);
}

Hat tip to Stephen for suggesting the hash trick. Want more? Check out all available Bearming add-ons.

Happy blogging, filtered to perfection.

  1. Built for the Bearming theme. Using a different theme? Add the Bearming tokens to make them work with your setup.↩