Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
Shimmer Effect using CSS
The shimmer effect is an animation effect, and many websites add the shimmer effect in the loading indicator. It is an illusion of movement in the web page or HTML element.
We can create a shimmer effect using various CSS properties such as linear gradients, keyframes, animation, background position, transform, etc. Basically, the shimmer effect adds alternative light and dark moving lines.
Here, we will learn to create a shimmer effect using CSS.
Syntax
Users can follow the syntax below to create a shimmer effect using the CSS.
.shimmer-div {
background: linear-gradient
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {
transform: translateX(percentage);
}
to {
transform: translateX(percentage);
}
}
In the above syntax, we have added the linear gradient as a background in the div element and added the animation, which uses the shimmer keyframes.
We move the div from left to right in the shimmer keyframes to create a shimmer effect.
Example
In the example below, we have a container div as a parent div. Inside the parent div element, we have added the multiple box elements and div with the ‘shimmer’ class name. Also, we have applied some CSS on the div element.
In CSS, we have set the linear gradient in the background, width, and shimmer keyframes as an animation for the shimmer div element. We move the shimmer div element from - 230% to 230% using the transform CSS property in the shimmer keyframes.
In the output, users can observe the moving lines on the parent div element which is called the shimmer effect.
<html>
<head>
<style>
.container {
background: grey;
display: flex;
width: 600px;
position: relative;
height: 100px;
box-sizing: border-box;
border-radius: 10px;
}
.box {
height: 90px;
width: 90px;
background: #ddd;
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(120deg,
rgba(255, 255, 0, 0.2) 30%,
rgba(255, 255, 0, 0.2) 50%,
rgba(255, 0, 255, 0.2) 80%);
animation: shimmer 2s infinite linear;
}
@keyframes shimmer {
from {transform: translateX(-230%);}
to {transform: translateX(230%);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<div class = "container">
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "box"> </div>
<div class = "shimmer-div"> </div>
</div>
</body>
</html>
Example
In the example below, we have added the shimmer effect on the image div element. Here, we have used the ‘mask’ CSS property instead of the ‘background’ CSS property. We have added the linear gradient as a value of the ‘-webkit-mask’ CSS property.
In the shimmer keyframes, we set the position of the mask using the ‘webkit-maskposition’ at the left. In the output, users can observe the shimmer effect of alternative light and dark lines on the image.
<html>
<head>
<style>
.shimmer-effect {
color: grey;
display: inline-block;
/* adding gradients */
-webkit-mask: linear-gradient(120deg, #000 25%, #0005, #000 75%) right/250% 100%;
/* shimmer effect animation */
animation: shimmer 2.5s infinite;
background-repeat: no-repeat;
width: 500px;
}
@keyframes shimmer {
100% {
/* setting up mask position at left side */
-webkit-mask-position: left
}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the HTML element using CSS</h2>
<img src = "https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRox9t_onikXnOMmZ-gIWcD0mYq3Z4mAeKO3NeeBWjG&s" Class = "shimmer-effect" />
</body>
</html>
Example
In the example below, we have added the shimmer effect on the loading indicator. First, we created the loading indicator using HTML and CSS. After that, we applied the linear gradient using the background CSS property into the shimmer div.
In the keyframes, we also rotate the shimmer div while moving it in the positive x direction. In the output, users can observe how pretty the shimmer effect looks in the loading indicator.
<html>
<head>
<style>
.loader {
position: relative;
width: 200px;
height: 200px;
border-radius: 50%;
border: 14px solid grey;
}
.shimmer {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 40%, rgba(255, 255, 255, 0.7) 60%, rgba(255, 255, 255, 0) 100%);
animation: shimmer 2s infinite;
transform: rotate(90deg);
}
@keyframes shimmer {
0% {transform: translateX(-50%) rotate(45deg);}
100% {transform: translateX(50%) rotate(45deg);}
}
</style>
</head>
<body>
<h2>Adding the <i> Shimmer Effect </i> to the loading indicatorx using CSS</h2>
<div class = "loader">
<div class = "shimmer"> </div>
</div>
</html>
Users learned to add a shimmer effect to the webpage using CSS. In the first example, we have added the shimmer effect to the div element. In the second example, we have used the ‘mask’ CSS property to add the shimmer effect on the image element. In the last example, we added the shimmer effect in the loading indicator.
6K+ Views
To Continue Learning Please Login