Many a times, there is necessity of converting Color image into Black and White or Grayscale.
Here in this very simple tutorial, we gonna show you, how to convert or change any Color image into Black and white
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
Step 1:
Add HTML : Load Color image :
<h2>Convert the image to grayscale:</h2> <div class = color> <img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%"> </div> <div class=black> <img src="https://adaptabiz.com/wp-content/uploads/2020/09/google-cardboard-min.jpg" alt="VR" width="50%" height="30%"> </div> <p><strong>Note:</strong> The filter property is not supported in Internet Explorer, Edge 12, or Safari 5.1 and earlier.</p>
Step 2 :
Using Css Filter
.black{
-webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
filter: grayscale(100%);
}
Output and Full Code :
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
You may Also Like
How to add Typing Effect / Type Writer Effect to your text Using JavaScript
By Richard
/ June 5, 2022
How to add Typing Effect / Type Writer Effect to your text Using JavaScript Step 1) Add HTML: <h1>Typewriter</h1>...
Read More
How to Create a full screen video background using HTML, CSS
By Richard
/ May 22, 2022
Learn How to Create a full screen video background using HTML, CSS Adding HTML <div class="videobg"> <video src="https://adaptabiz.com/wp-content/uploads/2021/05/Pexels-Videos-1234162.mp4" loop muted...
Read More
How to Create an Off-Canvas Menu / Side Bar Navigation
By Richard
/ April 29, 2022
How to Create an Off-Canvas Menu / Side Bar Navigation Step 1) Add HTML: <div id="mySidenav" class="sidenav"> <a href="javascript:void(0)" class="closebtn"...
Read More
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript
By Richard
/ April 19, 2022
How To Create a Coming Soon Page / Maintenance Page Using HTML, CSS and JavaScript Step 1 : Adding...
Read More
How to Create Weight Converter using HTML and JavaScript
By Richard
/ April 2, 2022
How to Create Weight Converter using HTML and JavaScript For Converting Pounds to Kilogram Adding HTML : <h2>Weight Converter Pound...
Read More
How to create a Scroll indicator with CSS and JavaScript
By Richard
/ February 19, 2022
How to create a Scroll indicator with CSS and JavaScript Step 1) Add HTML: <div class="header"> <h2>Scroll Indicator</h2> <div...
Read More
How to Convert Color image to Black & White using CSS Filter ( Color to Grayscale)
By Richard
/ February 15, 2022
Many a times, there is necessity of converting Color image into Black and White or Grayscale. Here in this very...
Read More
How to Create a JavaScript Countdown Timer
By Richard
/ February 4, 2022
There are many a times, when you’re going to need a countdown clock for your project. You may have an...
Read More
How to Create an Avatar image with CSS
By Richard
/ January 20, 2022
How to Create an Avatar image with CSS Step 1) Add HTML: <h2>How to create Avatar Images with CSS</h2> <img...
Read More
How to Change Background Images on Scroll with CSS.
By Richard
/ January 13, 2022
How to Change Background Images on Scroll with CSS. Step 1) Add HTML: <div class="bg-image img1"></div> <div class="bg-image img2"></div>...
Read More