How to Apply Filters and Control an Image's Opacity with CSS
This is gonna be a fun, and pretty quick tutorial on how we can control the brightness of an image using just CSS.
Guide Tasks
  • Read Tutorial
  • Watch Guide Video
  • Complete the Exercise
Video locked
This video is viewable to users with a free Dev Camp account

As you can see right there for this logo, right now it is just the basic white that came in from the image.

large

What we want to do is if you come here and see the finished version, we want to have a little bit of a lighter gray color.

You may think that you need to just get another image, redo it in Photoshop or something like that, but using CSS we actually have the ability to manage this. That's what we're gonna go through and I'm gonna show you two different ways that you can manage the brightness or kind of the coloring for images in HTML.

What I'm gonna do here is I've selected the image and I am going to start off using one process. I'm gonna show you how you can use a filter.

With this filter what you can do, you can see all of the different options, you can add a blur, you can control the brightness, the contrast, you can add a drop shadow, you can make it gray scale, change the hue and then a few other options.

large

What I want to show you though, and I definitely recommend that you experiment with all of those so you can become familiar with it, the filter process is very popular. For what we want to do, I'm gonna start off with just controlling the brightness.

I'm going to switch this and say I want the brightness to be 50%. So if I save that and come here and hit refresh, you can see that the brightness of this image is now a lot darker. It looks like we actually changed the color. That's one option.

large

Now the other option is to change the opacity. The opacity, if you've never seen it before, it's essentially allowing us to change the transparency percentage. I can say opacity: 0.5 for this, and it will give me a 50% opacity. Now if I hit save and come back right here and it refresh, you can see that it has changed.

large

What we did with the first option with filter, we actually changed the color itself. We did that by altering the brightness. Here, what we did is we actually made the image itself slightly transparent.

So, depending on your own personal use case, then both of these options will work in their own situation. That is how you can change the color using just pure CSS without actually having to alter the image at all.