Primer CSS Details

Primer CSS Grayscale

Last Updated : 07 Nov, 2022

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

Primer CSS Details

A

akshitsaxenaa09

Improve

Article Tags :

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

Primer CSS Details

Primer CSS is a free open-source CSS framework that is built upon a GitHub design system to provide support to the broad spectrum of GitHub websites. It creates the foundation of the basic style elements such as spacing, typography, and color. This systematic method makes sure our patterns are stead

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

Node Jimp | Color grayscale

Introduction The grayscale modifier is an inbuilt color modifier in Nodejs | Jimp which desaturate an image color into grayscale depending on a given amount, from 0 to 100. Syntax: image.color([ { apply: 'grayscale', params: [value] }]);Parameter: value - This parameter stores the amount of grayscal

Primer CSS Links

Primer CSS is a free and open-source CSS framework. It is built upon the systems that create the foundation of the basic style elements such as spacing, typography, and colour. Created with GitHubâ€™s design system, it is highly reusable and flexible. Primer CSS Links are used to decorate links in the

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

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

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

CSS grayscale() Function

The grayscale() function in CSS is an inbuilt function that is used to apply a filter to the image to set the grayscale of the image.Syntax:grayscale( amount )Parameters: This function accepts a single parameter amount that holds the value of grayscale. The value of grayscale is set in terms of numb

Primer CSS Nested 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