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.
<!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.
<!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