HOT
22bulbjungle
No Result
View All Result
22bulbjungle
No Result
View All Result
Home Web Development CSS

Background Image Color Overlay | Create a Filter Look with CSS

in CSS, Web Development
Reading Time: 4 mins read
2.3k 46
0
background-image-color-overlay-color-filter-effect-with-css-feature
3.2k
SHARES
14.5k
VIEWS
Share on FacebookShare on Twitter

Instead of adding a color overlay to the background image using Photoshop, you can actually use CSS to do that.

Having the CSS to work with this, it’s easy for someone to just upload an image. The same CSS adds style to the image rather than using an image editor every time.

RelatedPosts

How To Create a Beating Heart Shape Animation Using CSS

How To Transition a Height of Zero to a Height of Auto?

How To Apply CSS to Half of a Character

There are many ways you can achieve this color overlay filter effect with CSS, such as:

  1. Background Blend Mode (background-blend-mode property)
  2. Mix Blend Mode (mix-blend-mode property)
  3. Layering Background Image with Color
  4. CSS Grayscale Filter

First of all, the image below is the one we are going to use in all of the methods.

Background Blend Mode (background-blend-mode property)

So, how to use background-blend-mode property?

The idea of a background blend mode is you have to add a background color and also a background image and blend it together.

Well, that was not it – you can choose the different blending modes you like.

You can also add two different images in one container and blend it together.

For example:

.container {
background-image: url("image-a.jpg"), url("image-b.jpg");
background-repeat: no-repeat, repeat;
background-blend-mode: color;
}

If you are familiar with using Photoshop, you notice that there are different blending modes option to choose from. In css, it might not actually works like every blending modes in Photoshop however most of them functions in similar way.

See video:

Here are the list of CSS Blend modes you can use:

  • color
  • color-burn
  • color-dodge
  • darken
  • difference
  • exclusion
  • hard-light
  • hue
  • lighten
  • luminosity
  • multiply
  • normal
  • overlay
  • saturation
  • screen
  • Soft-light

See example below:

.container {
width: 600px;
height: 400px;
background-image: url("image-a.jpg");
background-repeat: repeat;
background-color: red;
background-blend-mode: exclusion;
}

Result:

background-image-color-overlay-color-filter-effect-exclusion

Note: There is a disadvantage in using this method as Internet Explorer do not support background-blend-mode property.

Mix Blend Mode (mix-blend-mode property)

Mix blend mode is the same as the background blend mode property. The only difference is mix blend mode specifies how the child element content should blend with its background.

See example below:

.container {
background-color: red;
}

.container img {
mix-blend-mode: multiply;
}

Result:

Note: Internet explorer do not support mix-blend-mode css property.

Layering Background Image with Color

Personally, I think this is the best method to use when creating a CSS background image color overlay filter effect.

See example below:

<div class="container">
<div class="content">
<h1>Please Subscribe!</h1>
</div>
</div>
.container{
width: 100%;
height: 500px;
background:url(image.jpg);
background-size: cover;
background-position: center;
display: flex;
position: relative;

}

h1{
color: #fff;
font-family: sans-serif;
text-align: center;
font-size: 60px;
}

.content{
position: absolute;
left: 0;
right: 0;
}

.container:before {
content: "";
background: #80007b;
width: 100%;
opacity: .5;
transition: .5s ease;
}

.container:hover:before{
background: #58ffd2;
}

We want to keep our  :before container dimensions the same with the parent. Therefore, we add a display:flex to it

Result:

Subscribe to our youtube channel: Garnatti one!

See video:

Other example results:

22bulbjungle-CSS background image color overlay Hello-baby-22bulbjungle-css-background-image-color-overlay CSS background image color overlay css_color_filter_overlay

CSS Grayscale Filter

Although this method only makes an image into a grayscale color, it would be easier if you use this method if you prefer a black and white image filter.

See example:

Img{
-webkit-filter: grayscale(100%);
filter: grayscale(100%);
}

Result:

background-image-color-overlay-color-filter-effect-grayscale

You can adjust the value percentage of the property. The higher the value the darker the image would become.

See video:

Note: Internet Explorer and Safari 5.1 and earlier do not support filter CSS property.

In conclusion, there are a lot of ways you can achieve a color filter effect to a background image using CSS. This just depends on whichever you want it.

Speaking of background image color overlay, you might also be interested in image hover effects and other background image tutorials using pure CSS.

See videos below:

Tags: Background ImageBackground-blend-modeCSSHover EffectImagesLinear-gradientTutorial
Share1279Tweet799Share320

Related Posts

How To Create a Beating Heart Shape Animation Using CSS
CSS

How To Create a Beating Heart Shape Animation Using CSS

by 22bulbjungle
December 28, 2022
0

Create the HTML structure Create the HTML structure for the heart shape. We'll use a div element with the class "heart": <div...

Read more
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
Electronics, Smartphone, Computer & Tablet Repair Kit
How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022
How To Apply CSS to Half of a Character

How To Apply CSS to Half of a Character

December 23, 2022
How To Set Cellpadding and Cellspacing Using CSS

How To Set Cellpadding and Cellspacing Using CSS

December 22, 2022
How To Prevent or Disable Copy and Paste in an Input Field

How To Prevent or Disable Copy and Paste in an Input Field

December 21, 2022
How To Turn Image Into Vintage With CSS

How To Turn Image Into Vintage With CSS

December 21, 2022

Free Do it yourself tutorials on CSS, HTML, Photoshop, Wordpress, and Woocommerce to help you learn web development and graphic design.

Follow Us

Affiliate Disclosure: 22bulbjungle is a participant in the Amazon Services LLC Associates Program, an affiliate advertising program designed to provide a means for sites to earn advertising fees by advertising and linking to Amazon.com.

Recent Tutorials

How To Create a Beating Heart Shape Animation Using CSS

How To Create a Beating Heart Shape Animation Using CSS

December 28, 2022
How to transition a height of zero to a height of Auto

How To Transition a Height of Zero to a Height of Auto?

December 23, 2022

Categories

  • CSS
  • Duda Builder
  • Ecommerce
  • Elementor
  • Graphic Design
  • htaccess
  • Javascript
  • jQuery
  • PC Tips
  • Photoshop
  • PHP
  • Responsive design
  • Shopify
  • Video
  • Web Design
  • Web Development
  • Webdev Tips
  • Woocommerce
  • Wordpress
  • Home
  • Blog
  • Web Development
  • Graphic Design

© 2022 22BulbJungle.

No Result
View All Result
  • Home
  • Blog
  • Web Development
    • CSS
    • Javascript
    • WordPress
  • Graphic Design
    • Photoshop

© 2022 22BulbJungle.

Welcome Back!

Login to your account below

Forgotten Password?

Retrieve your password

Please enter your username or email address to reset your password.

Log In
This website uses cookies. By continuing to use this website you are giving consent to cookies being used. Visit our Privacy and Cookie Policy.