Using one or more newer CSS properties (
filter) gives us a surprising amount of possibilities to manipulate a single source image.
In most of these effects the single source background-image url is repeated one or more times and blended with itself using CSS blend modes (
In some of these effects, the CSS
filter property is used to further refine the output. Functions like
contrast() can and should be tweaked to achieve a better result for images you use.
Click on CodePen buttons to see how effects are implemented, or scroll down to the Implementation section.
These effects should be used as a progressive enhancement.
By default, the source image is displayed without any effects. When CSS
@supports detects support for the required CSS properties and values for an individual effect, then the effect will be enabled. This amounts to a precise, native, and lightweight feature detection.
A complete CSS library of these effects can be downloaded unminified (12.8kb) or minified (8.7kb). Using gzip, the entire image effects library is less than 1300 bytes.
This project is available on GitHub.
In each of these CSS/SCSS snippets, replace
photo.jpg with the URL of the image you are using.
<img width="" height="" src="photo.jpg" alt="">
In this implementation, the
<img> tag acts as a placeholder, setting the correct aspect ratio for the effect while being visually hidden with CSS. Setting values for the
alt attributes is recommended.
To try out any effect for yourself, click on the CodePen button.