Primer CSS Grayscale Last Updated : 07 Nov, 2022 Comments Improve Suggest changes Like Article Like Report Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by object-oriented CSS principles, functional CSS, and BEM architecture. It is highly reusable and flexible. It is created with GitHub’s design system. In this article, we will learn about Primer CSS Grayscale. It is used to remove all colors from an element and make it black and white. Primer CSS Grayscale Class: grayscale: This class is used to remove all colors of an element, and make it render in black and white. Syntax: <img src="" class="grayscale" /> Example 1: In this example, we will show how grayscale can be used to render black and white images. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/[email protected]/dist/primer.css"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Primer CSS Grayscale</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png" class="grayscale"> </body> </html> Output: Example 2: In this example, we will use the grayscale class in div. We will also write a heading and provide a font-color to it but since we have written it under class grayscale so it will be rendered black and white. HTML <!DOCTYPE html> <html> <head> <link rel="stylesheet" href= "https://unpkg.com/@primer/[email protected]/dist/primer.css"> </head> <body> <h1 style="color:green;"> GeeksforGeeks </h1> <h3>Primer CSS Grayscale</h3> <div class="grayscale"> <h3 style="color:red">Hi Geek!!</h3> <img src= "https://media.geeksforgeeks.org/wp-content/uploads/20220217090847/download3.png"> </div> </body> </html> Output: Reference: https://primer.style/css/utilities/marketing-filters#grayscale Comment More infoAdvertise with us Next Article Primer CSS Grayscale A akshitsaxenaa09 Follow Improve Article Tags : Web Technologies CSS Primer-CSS Primer-CSS Utilities Similar Reads Tailwind CSS Grayscale The Grayscale class is used to apply a filter to the image to set the grayscale of the image. In CSS, we do that by using the CSS grayscale() Function. Tailwind CSS newly added feature brightness in 2.1 version. Grayscale: grayscale-0: This class is used to represents the original image.grayscale: T 1 min read Primer CSS Box Overlay Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Primary Link Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Muted Link Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are steady and interoperable with every other. Its approach to CSS is influenced by 2 min read Primer CSS Marketing Filters Primer CSS is a free open-source CSS framework that is built upon systems that create the foundation of the basic style elements such as spacing, typography, and color. It is highly reusable and flexible. It is created with GitHub’s design system.Filters are used to change the overall background or 2 min read Like