Categories / Tutorials

Mindblowing CSS Image Effects Every Designer Needs To Try

Levin Mejia March 31, 2021 · 2 min read

Images are vital to our web design projects. They instantly tell a story of the site’s purpose. They invite visitors to explore the site’s content whether it’s a personal portfolio or an ecommerce site for a client. Images have a profound effect, and with CSS filters, we can take our web images to new levels and improve our site’s performance at the same time.
Note: If you’d like to follow along with the examples mentioned here, download my git repo: https://github.com/levinmejia/css-image-effects

CSS Filters

To start creating beautiful effects for our images through CSS, we first need to become familiar with CSS Filters. CSS filters gives us the ability to manipulate images by changing their colors and adding effects like blurs.
Here’s the image by Micki Spollen that we will be using to learn how we can make mindblowing image effects with CSS.
image by Micki Spollen
Let’s start by turning our color image into greyscale. We can manipulate our photo to become black and white with the following CSS snippet:

Greyscale
We can also do fun things like inverting the colors:

Inverting Colors
We can do more than change the image’s colors by doing things like adding a blur effect:

Blur Effect
If you’re looking to add multiple effects, you can do so with the following syntax:

CSSgram

CSS filters are a powerful way to build your own unique photo effects, but if you’re looking for a plug and play solution, check out CSSgram. CSSgram is a tiny (<1kb gzipped!) library for recreating Instagram filters with CSS filters and blend modes. CSSgram comes with 18 prebuilt effects. Here are a few examples: CSSGram
The quickest way to get started with CSSgram is to download the CSSgram library and link it within your project:

Then, we’ll add one of the predefined classes in our html to add the effect to our photo:

For a list of all available effects, visit http://una.im/CSSgram/

CSS Blending Modes

006
If you have used Sketch or Photoshop you’re most likely familiar with blending modes. Blending modes can create powerful image effects and you can use them using CSS for your images. I have created four effects to help you get started with blending modes:
1. Overlay an element on top of a photo – in this case I have overlaid a circle element on top of my photo with the following code snippets:

2. Blend text – There are so many possibilities when you start combining text with images. Here’s how I accomplished the above example:

3. Background image blend with a solid colour:

4. Image blend effect using a gradient

Backfilters

In 2013, Apple released iOS 7 with a complete overhaul of their UI, presenting a flat design approach. iOS 7 introduced blurring effects to blur the background and bring focus to important content in the forefront. In a recent release of Webkit, we can now recreate the same effect without the need for any Javascript or CSS hacks. We can blur content behind an element with the following code:

If you have downloaded the Github repo for these examples, you will see that I have added this effect to the top navigation to create the blurring effect on the content below the navigation bar:
007
To learn more and check compatibility on backdrop filters, visit https://webkit.org/blog/3632/introducing-backdrop-filters/

Animating CSS Filters

Things get even more interesting when we start animating CSS Filters! We can trigger animations when a visitor hovers over an image or when they interact with our content (when clicking on a button, for example).
008
We can animate the CSS Filter on mouse hover with this CSS snippet:

If we want a CSS Filter to be animated when clicking a button, we can use code similar to the following:

Optimizing Site Performance with CSS Filters

An added bonus of using CSS filters to create amazing photo effects is that they can also help improve your site’s performance. CSS filters can do this because they don’t require multiple images to create UI interactions. For example, let’s say that your client wants to display a product image gallery in their ecommerce store that would show the color version of a greyscale image as you hover over the image. In the past we would need two images and some javascript to create this interaction for a single image. This not only meant that your visitor would have to download two sets of images, but the Designer would need more time to prepare these two sets of images: one greyscale and one in color. Now we can create this UI interaction with CSS Filters and one line of CSS code. In the process we cut the amount of assets required in half, and we no longer require our visitors to use additional bandwidth to load a second image.
009

Image Trends for 2016

Beautiful imagery dominated web design trends in 2015, and 2016 will not be any different. Now that we are familiar with and can animate CSS filters, we can create mindblowing image effects for our web projects with minimal effort to create beautiful layouts and interactions for our visitors.


Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC.

Lettering Worksheets
Getting started with hand lettering?
Free lettering worksheets

Download these worksheets and start practicing with simple instructions and tracing exercises.

Download now!
About the Author
Author
Levin Mejia

Levin is a self-taught designer and front-end developer working with Shopify as a Designer Advocate. His passion for design combined with his thirst for continual learning inspired him to run his own conference: Go Beyond Pixels. He has worked for clients all over the world, such as Vox Media in NYC…

View More Posts
Related Articles
10 Comments
  • Very cool, I will have to give them a shot in my next project. If I find any issues, I'll be sure to post on your github. 7 years ago
  • Sounds good @Derek Stevenson ! 7 years ago
  • Hi! thanks for the article, I've a cople of cuestions after reading it. First, why would you put a shedload of code if you can make it easily using Ps? isn't it a good practice to keep the code as short and simple as possible? I think these prefixes don't work well in every browser and you can add these effects with a simple image. Cheers! 7 years ago
  • Hey @Christian Quintero , while we should always try to keep code to a minimum, we can use CSS to cut down on the amount of image assets we require users to download if you're using the same image but plan on having different effects for each instance of the image. For example, you may want to use the image with a text overlay where the image is black and white. But you may also want to create an animation where the image fades from black and white to full colour on hover. In this case, the visitor of your site would only need to download one image while you get the advantage of adding image effects with a css class. Hope that helps answer your question! 7 years ago
  • It sure did! thank you so much mate, I'll try to use this advice on my next project. 7 years ago
  • Very cool effects @Levin Mejia . CSS has definitely come a long way! 7 years ago
  • Thanks @Beth Rufener , it definitely has! 7 years ago
  • CSSgram is an awesome find @Levin Mejia ! 7 years ago
  • Yeah it's pretty awesome! @Laura Busche 7 years ago