Skip to content

Courses
Tutorials
Practice
Contests

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

Tailwind CSS Hover Effects

Shimmer Effect using CSS

Last Updated : 26 Apr, 2025

Comments

Improve

Suggest changes

Like Article

Like

Report

A Shimmer Effect is much in trend to produce an illusional glass effect on articles, texts, or images. This might seem a very extravagant property from only some CSS frameworks but the fun part is we can do it using CSS and its properties very easily.

First of all, create a div container with an article tag and add dummy lines in the code. Style the position relative to this article tag. Add a shimmer div where we’ll be creating the magic. Then add basic styling to the current div tags. The position for this shimmer class should be kept relative.

Then finally, add styling to the shimmer tag. It mainly has 2 components to add style.

Key-Frames – Here you will give the path of the transformation from where to where it will go. It can be vertical or horizontal according to your requirement for alignment.
Animation – Add timeframe of the animation and infinite linear i.e. the orientation of the animation.

Example: Here is the implementation of the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content=
        "width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <title>Shimmer Effect using CSS</title>
</head>
 
<body>
    <div class="container">
        <article>
            <div class="line"></div>
            <div class="line"></div>
            <div class="line"></div>
            <div class="shimmer"></div>
        </article>
    </div>
</body>
</html>

CSS

article{
    background: #ddd;
    width: 100%;
    position: relative;
    padding: 20px;
    box-sizing: border-box;
    border-radius: 10px;
}
 
article .line{
    width: 100%;
    height: 20px;
    background: #bbb;
    margin: 20px 0;
    border-radius: 5px;
}
 
article .shimmer{
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
 
    background: linear-gradient(100deg,
    rgba(255,255,255,0) 20%,
    rgba(255,255,255,0.5) 50%,
    rgba(255,255,255,0) 80%);
 
    animation: shimmer 2s infinite linear;
}
 
@keyframes shimmer{
    from {
        transform: translateX(-200%);
    }
    to{
        transform: translateX(200%);
    }
}

Output:

Shimmer Effect using CSS

Tailwind CSS Hover Effects

S

sanssg1701

Improve

Article Tags :

CSS
Technical Scripter
Web Technologies
CSS-Properties
CSS-Questions
Technical Scripter 2022

Similar Reads

Text Split Effect using CSS

The Text Split Effect in CSS is a popular and visually engaging technique that breaks up a block of text into individual letters or words, which are then animated or styled separately. This effect can add a creative touch to any webpage, making it dynamic and interactive. In this article, we will ex

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

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

Dancing Keys Effect using HTML and CSS

The dancing keys effect is a type of text-animation effect that can be implemented using CSS. In this effect, each letter is given the form of a keyboard key and then animations are applied to move it along either X-axis or Y-axis. This effect is also known as the Jumping Key effect or Piano Key eff

How to Add Onclick Effect using CSS ?

In this article, we will see how to add onclick effect using CSS. To add the onclick effect using CSS, we can use :active pseudo selector. When an element is clicked, the onclick JavaScript event is launched. JavaScript is required to add an event listener to the HTML element and then run some code

Shiny Glimmering Neon Button Effect using CSS

A Shiny Glimmering Neon Button can be created using pure CSS with the shadow-effect. These buttons can be used to give a good contrast on dark backgrounds or themes. It gives a minimalistic look and attract user attention. The below steps have to followed to create this effect.Â HTML Section: This s

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

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-o

Double Layered Text Effect using CSS

The double-layered text effect feature is very new in the world of text-animation targeting animated websites and its users as the audience. The feature basically has two layers for every word and the upper layer can be manipulated by various events such as hover events. The rotation of the upper la

How to create a marquee effect using CSS ?

In this article, we will be creating the marquee effect by using HTML and CSS. This effect can be created by using the <marquee> tag in HTML, but we will not use this tag as it is not widely used nowadays. We will create and design a marquee effect by using the CSS classes and styling properti

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

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

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