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.

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-durationof 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 shimering effect.

Example

Here is a complete example code implementing above mentioned steps to create a shimmer effect using CSS.

<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;
        }
        .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>

Conclusion

In this article, we undesrtood how to create a shimmer effect using CSS. We have used linear-gradient, CSS animation and @keyframes to create shimmer effect.

Updated on: 2024-09-30T15:20:34+05:30

9K+ Views

Kickstart Your Career

Get certified by completing the course

Get Started
Advertisements