W3.CSS Effects Last Updated : 02 Mar, 2021 Summarize Comments Improve Suggest changes Share Like Article Like Report W3.CSS provides web developers with various effects. They can broadly be classified into three divisions. They are: OpacityGrayscaleSepiaOpacity Effects:There are four opacity effect classes: Sr. No. Class Name Description 1. w3-opacity-min The opacity of the targeted element is set to 0.75. 2. w3-opacity The opacity of the targeted element is set to 0.6. 3. w3-opacity-max The opacity of the targeted element is set to 0.25. 4. w3-hover-opacity The opacity of the targeted element is set to 0.6 on hover. Example: HTML <!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Opacity Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity-min" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity-min </span> </p> </div> <!-- Normal Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity </span> </p> </div> <!-- Maximum Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-opacity-max" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-opacity-max </span> </p> </div> <!-- On Hover Opacity --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-opacity" src="gfg.png"> <p> <span class="w3-text-red"> Class </span> <br> <span class="w3-text-blue"> w3-hover-opacity </span> </p> </div> </div> </body> </html> Output: Grayscale Effects: There are four grayscale effects classes: Sr. No. Class Name Description 1. w3-grayscale-min The grayscale of the targeted element is set to 50%. 2. w3-grayscale The grayscale of the targeted element is set to 75%. 3. w3-grayscale-max The grayscale of the targeted element is set to 100%. 4. w3-hover-grayscale The grayscale of the targeted element is set to 100% on hover. Example: HTML <!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Grayscale Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale-min" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale-min </span> </p> </div> <!-- Normal Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale </span> </p> </div> <!-- Maximum Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-grayscale-max" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-grayscale-max </span> </p> </div> <!-- On Hover Grayscale --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-grayscale" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-hover-grayscale </span> </p> </div> </div> </body> </html> Output: Sepia Effects: There are four sepia classes: Sr. No. Class Name Description 1. w3-sepia-min The sepia effect of the targeted element is set to 50%. 2. w3-sepia The sepia effect of the targeted element is set to 75%. 3. w3-sepia-max The sepia effect of the targeted element is set to 100%. 4. w3-hover-sepia The sepia effect of the targeted element is set to 100% on hover. Example: HTML <!DOCTYPE html> <html> <head> <!-- Adding W3.CSS file through external link --> <link rel="stylesheet" href= "https://www.w3schools.com/w3css/4/w3.css"> </head> <body> <!-- w3-container is used to add 16px padding to any HTML element. --> <!-- w3-center is used to set the content of the element to the center. --> <div class="w3-container w3-center"> <!-- w3-text-green sets the text colour to green. --> <!-- w3-xxlarge sets font size to 32px. --> <h2 class="w3-text-green w3-xxlarge"> Welcome To GFG </h2> </div> <!-- Images with Sepia Effects --> <div class="w3-row w3-row-padding w3-center"> <!-- Minimum Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia-min" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia-min </span> </p> </div> <!-- Normal Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia </span> </p> </div> <!-- Maximum Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-sepia-max" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-sepia-max </span> </p> </div> <!-- On Hover Sepia --> <div class="w3-col m3 l3"> <img class="w3-image w3-hover-sepia" src="gfg.png"> <p> <span class="w3-text-red">Class</span> <br> <span class="w3-text-blue"> w3-hover-sepia </span> </p> </div> </div> </body> </html> Output: Comment More infoAdvertise with us Next Article W3.CSS Tags A aditya_taparia Follow Improve Article Tags : CSS W3.CSS Similar Reads CSS Text Effects CSS (Cascading Style Sheets) is the mechanism used to add style to web documents. Through CSS, we can apply various effects on text, enhancing its appearance and improving user experience on web pages.In this article, we'll cover several key CSS properties that can be used to apply text effects, inc 4 min read CSS Shadow Effect The shadow effect property in CSS is used to add shadows to text and images in HTML documents. This enhances the visual appeal and depth of your web elements, making your design more engaging. Text ShadowThe text-shadow property in CSS is used to display text with a shadow. This property defines the 2 min read W3.CSS Tags The .w3-tag is used to add additional information to the content. For example, some website highlights some sections to be new or when they have updated a section they add updated tag with that division so that user can see that they have updated to added new divisions on their site. This class when 4 min read CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato 7 min read CSS Selectors CSS Selectors are used to target HTML elements on your pages, allowing you to apply styles based on their ID, class, type attributes, and more. There are mainly 5 types of selectors.Basic CSS Selectors: These are used to target elements by tag, .class, or # ID for fundamental styling needs.Combinato 7 min read W3.CSS Cards A card is a flexible and extensible content container. It can include header, footer and a wide variety of content. W3.CSS helps the developers to add paper-like effects to the elements. It contains three types of classes: Sr. No. Class Name Description 1. w3-card It is used to add a box shadow of 2 3 min read Like