Skip to content
Related Articles
Get the best out of our app
GeeksforGeeks App
Open App
geeksforgeeks
Browser
Continue

Related Articles

Primer CSS Grayscale

Improve Article
Save Article
Like Article
Improve Article
Save Article
Like Article

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=
</head>
 
<body>
    <h1 style="color:green;">
        GeeksforGeeks
    </h1>
     
    <h3>Primer CSS Grayscale</h3>
     
    <img src=
        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=
</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=
    </div>
</body>
 
</html>

Output:

 

Reference: https://primer.style/css/utilities/marketing-filters#grayscale


My Personal Notes arrow_drop_up
Last Updated : 07 Nov, 2022
Like Article
Save Article
Similar Reads
Related Tutorials