Skip to content
geeksforgeeks
  • Courses
    • DSA to Development
    • Get IBM Certification
    • Newly Launched!
      • Master Django Framework
      • Become AWS Certified
    • For Working Professionals
      • Interview 101: DSA & System Design
      • Data Science Training Program
      • JAVA Backend Development (Live)
      • DevOps Engineering (LIVE)
      • Data Structures & Algorithms in Python
    • For Students
      • Placement Preparation Course
      • Data Science (Live)
      • Data Structure & Algorithm-Self Paced (C++/JAVA)
      • Master Competitive Programming (Live)
      • Full Stack Development with React & Node JS (Live)
    • Full Stack Development
    • Data Science Program
    • All Courses
  • Tutorials
    • Data Structures & Algorithms
    • ML & Data Science
    • Interview Corner
    • Programming Languages
    • Web Development
    • CS Subjects
    • DevOps And Linux
    • School Learning
  • Practice
    • Build your AI Agent
    • GfG 160
    • Problem of the Day
    • Practice Coding Problems
    • GfG SDE Sheet
  • Contests
    • Accenture Hackathon (Ending Soon!)
    • GfG Weekly [Rated Contest]
    • Job-A-Thon Hiring Challenge
    • All Contests and Events
  • CSS Tutorial
  • CSS Exercises
  • CSS Interview Questions
  • CSS Selectors
  • CSS Properties
  • CSS Functions
  • CSS Examples
  • CSS Cheat Sheet
  • CSS Templates
  • CSS Frameworks
  • Bootstrap
  • Tailwind
  • CSS Formatter
Open In App
Next Article:
W3.CSS Lists
Next article icon

W3.CSS Effects

Last Updated : 02 Mar, 2021
Comments
Improve
Suggest changes
Like Article
Like
Report

W3.CSS provides web developers with various effects. They can broadly be classified into three divisions. They are:

  • Opacity
  • Grayscale
  • Sepia

Opacity 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:
      

                                                                                      

                                                                                
                                          
                                                                                  
                                                                  
                              
                                
                                                                            Next Article                                                                                                                                                            
                                          W3.CSS Lists                                      
                                  
                                                          
                          
                              
                                          
                                              
                                                  
                                                  
                                                      
author          
                        
          
                                                  
                                                  
                                                      aditya_taparia                                                
                                                  
                                                  
              
              
  
                                            
                                                                                        
                                          
                                                                                            
                                                                                                                                                  
                                                                                                                            
                                      Improve                                                                        
                                                                        
                          
                          
                                                              
                                      
Article Tags : 
                                      
                                                            
  •                   CSS              
    •               
  •                   Web Technologies              
    •               
  •                   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, in
                      
                      
                                                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                  
                      
  •                       
    W3.CSS Lists                      
                          
    Lists are very useful in a webpage. It can be used a variety of content as they are flexible and easy to manage. We use .w3-ul class for the list. The default style for the list is borderless but we can use other classes to add a border and other effects to the list. Example: Adding a list on a webp
                      
                      
                                                5 min read                  
                      
  •                       
    CSS Stencil Effect                      
                          
    The Stencil effect is a classical text effect that has emerged in the last decade. This type of effect is generally used in websites where the User Interface is not of main concern. Examples of such designs can be found on movie downloading websites where the interface is not the best looking as the
                      
                      
                                                2 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.Combinator
                      
                      
                                                7 min read                  
                      
  •                       
    W3.CSS Images                      
                          
    W3.CSS offers a single class for managing images and making them responsive. Making an image responsive means it should scale according to its parent element. That is, the size of the image should not overflow its parent and will grow and shrink according to the change in the size of its parent with
                      
                      
                                                4 min read                  
                      
  •                       
    Tailwind CSS Hover Effects                      
                          
    A hover effect is a visual change that occurs when a user moves their mouse pointer over an element on a webpage. We can achieve a hover effect by Tailwind CSS built-in prefix modifier called "hover: ". These are the following ways to use hover: Table of Content Simple Hover Effect (Background color
                      
                      
                                                3 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                  
                      
  •                       
    CSS Fonts                      
                          
    CSS fonts control how text appears on a webpage. With CSS, you can specify various properties like font family, size, weight, style, and line height to create visually appealing and readable typography [GFGTABS] HTML <!--Driver Code Starts{--> <html> <head> <!--Driver Code Ends
                      
                      
                                                5 min read                  
                      
                                 
                              
                                                                                
                                  
                                                                                                            
                              
                            
                              
                                                                                      
                                
                              
                                                                                    
                      
                  
              
                  
          
              
                  
                      
                                        
                   
                            
                                  
                              
                                  
              
          
              
                        
  	  	  	
  		
  					
  			
  			
  					
  	
    	  	
  		
  					
  			
  			
  			
  				
  	
  	  	        	  	
  		
  					
  			
  			    	  	
  		
  		   		
  	
  
                    
          
      
      
          
              
              
          
      
  
    
                        	
    
      
                
          
                    
              
                
                                  
                        
        
      
    
      
        
        
            
                                  geeksforgeeks-footer-logo                                
                    
                      
                                               
                                               
Corporate & Communications Address:
                                              
                        A-143, 7th Floor, Sovereign Corporate Tower, Sector- 136, Noida, Uttar Pradesh (201305)                    
                      
                    
                                               
                                                  
                          
Registered Address:
                          K 061, Tower K, Gulshan Vivante Apartment, Sector 137, Noida, Gautam Buddh Nagar, Uttar Pradesh, 201305                      
                      
                                        
                
                
                                            
                                                                
                                                                
                                                                
                                                                
                                    
                
                    GFG App on Play Store                    GFG App on App Store                
                
                  Advertise with us                
             
          
            
  • Company
  • About Us
  • Legal
  • Privacy Policy
  • In Media
  • Contact Us
  • Advertise with us
  • GFG Corporate Solution
  • Placement Training Program
  • Languages
  • Python
  • Java
  • C++
  • PHP
  • GoLang
  • SQL
  • R Language
  • Android Tutorial
  • Tutorials Archive
  • DSA
  • Data Structures
  • Algorithms
  • DSA for Beginners
  • Basic DSA Problems
  • DSA Roadmap
  • Top 100 DSA Interview Problems
  • DSA Roadmap by Sandeep Jain
  • All Cheat Sheets
  • Data Science & ML
  • Data Science With Python
  • Data Science For Beginner
  • Machine Learning
  • ML Maths
  • Data Visualisation
  • Pandas
  • NumPy
  • NLP
  • Deep Learning
  • Web Technologies
  • HTML
  • CSS
  • JavaScript
  • TypeScript
  • ReactJS
  • NextJS
  • Bootstrap
  • Web Design
  • Python Tutorial
  • Python Programming Examples
  • Python Projects
  • Python Tkinter
  • Python Web Scraping
  • OpenCV Tutorial
  • Python Interview Question
  • Django
  • Computer Science
  • Operating Systems
  • Computer Network
  • Database Management System
  • Software Engineering
  • Digital Logic Design
  • Engineering Maths
  • Software Development
  • Software Testing
  • DevOps
  • Git
  • Linux
  • AWS
  • Docker
  • Kubernetes
  • Azure
  • GCP
  • DevOps Roadmap
  • System Design
  • High Level Design
  • Low Level Design
  • UML Diagrams
  • Interview Guide
  • Design Patterns
  • OOAD
  • System Design Bootcamp
  • Interview Questions
  • Inteview Preparation
  • Competitive Programming
  • Top DS or Algo for CP
  • Company-Wise Recruitment Process
  • Company-Wise Preparation
  • Aptitude Preparation
  • Puzzles
  • School Subjects
  • Mathematics
  • Physics
  • Chemistry
  • Biology
  • Social Science
  • English Grammar
  • Commerce
  • World GK
  • GeeksforGeeks Videos
  • DSA
  • Python
  • Java
  • C++
  • Web Development
  • Data Science
  • CS Subjects
        
         
                              
            
                @GeeksforGeeks, Sanchhaya Education Private Limited, All rights reserved            
            
            
        
    
  
         
                We use cookies to ensure you have the best browsing experience on our website. By using our site, you          acknowledge that you have read and understood our          Cookie Policy &          Privacy Policy                      
        
     Lightbox       
                      
              
                  
                      
Improvement
                      
                                                
                  
                  
                      
                                          
                                                
                  
                  
                    
                      
                        
Suggest Changes
                        
Help us improve. Share your suggestions to enhance the article. Contribute your expertise and make a difference in the GeeksforGeeks portal.
                      
                      
                        geeksforgeeks-suggest-icon                      
                    
                    
                      
                        
Create Improvement
                        
Enhance the article with your expertise. Contribute to the GeeksforGeeks community and help create better learning resources for all.
                      
                      
                      geeksforgeeks-improvement-icon                      
                    
                    
                  
              
              
                                    
                    
                      
                                              
                      
Suggest Changes
                    
                    
                                              
                  
                  
                          
min 4 words, max Words Limit:1000
                          
                          
                                                    
                                
Thank You!
                                
Your suggestions are valuable to us.
                          
                  
                                     
                      
                                        
              
                        
                                                        
       
         
             
                 
What kind of Experience do you want to share?
                 
             
                          
                                      
                         
                     
                     
                         Interview Experiences                     
                                                       
                         
                     
                     
                         Admission Experiences                     
                                                       
                         
                     
                     
                         Career Journeys                     
                                                       
                         
                     
                     
                         Work Experiences                     
                                                       
                         
                     
                     
                         Campus Experiences                     
                                                       
                         
                     
                     
                         Competitive Exam Experiences