Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
Selected Reading
Shimmer Effect using CSS
To create shimmer effect using CSS, we will be using CSS animations and linear-gradient properties. Shimmer effect is an animation effect used in many webpages while loading the web page.
In this article we are having a layout of a box having two other child boxes, our task is to create a shimmer effect using CSS.
Syntax
.shimmer-element {
background: linear-gradient(to right, transparent 20%, rgba(255,255,255,0.5) 50%, transparent 80%);
animation: shimmer duration timing-function iteration-count;
}
@keyframes shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
Steps to Create Shimmer Effect
We will be following below mentioned steps to create shimmer effect using CSS
- We are having two boxes wrapped inside a div container.
- The container class sets the dimension of parent div using CSS height and width property and makes it a flexbox using display property. We have centered the child element vertically using align-items property.
- We have set it's position to relative, so it's child nodes would be placed based on container. We have set it's background-color and border-radius for curved edges.
- We have used box class to set the style for the boxes. We have set their height, width, background-color, border-radius and margin.
- The shimmer-div class is responsible for creating a shimmer effect. It is positioned relative to container with top and left edge aligned with it's parent div. We have used "background: linear-gradient()" which set a linear gradient background transitioning from left to right. We have used rgba value for the linear-gradient.
- We have used "animation: shimmer 1.7s linear infinite;" to create an animation with the name shimmer, having animation-duration of 1.7 sec, having infinite animation-iteration-count and linear timing-function.
- The @keyframes shimmer rule defines animation named shimmer which creates a sliding animation from left to right using translateX function of transform property creating shimmer effect.
Example
Here is a complete example code implementing above mentioned steps to create a shimmer effect using CSS
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background-color: rgb(203, 201, 201);
display: flex;
width: 230px;
position: relative;
height: 120px;
align-items: center;
box-sizing: border-box;
border-radius: 10px;
overflow: hidden;
}
.box {
height: 90px;
width: 90px;
background-color: rgb(230, 229, 229);
margin: 5px 20px;
border-radius: 8px;
}
.shimmer-div {
width: 30%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: linear-gradient(to right,
rgba(238, 238, 238, 0) 20%,
rgba(250, 250, 250, 0.5) 50%,
rgba(238, 238, 238, 0) 80%);
animation: shimmer 1.7s linear infinite;
}
@keyframes shimmer {
from {
transform: translateX(-230%);
}
to {
transform: translateX(280%);
}
}
</style>
</head>
<body>
<h3>Shimmer Effect using CSS</h3>
<div class="container">
<div class="box"></div>
<div class="box"></div>
<div class="shimmer-div"></div>
</div>
</body>
</html>
A gray container with rounded corners containing two light gray boxes appears. A white shimmer light continuously moves from left to right across the boxes, creating a loading effect similar to those seen on social media platforms.
Conclusion
In this article, we understood how to create a shimmer effect using CSS. We have used linear-gradient, CSS animation and @keyframes to create shimmer effect. This technique is commonly used in loading states for better user experience.
Updated on: 2026-03-15T16:48:01+05:30
9K+ Views
Advertisements