How to Add Shimmer Effect in CSS

Make CSS Shimmer Effect Work an already loaded Image

Use mask

.shimmer {
  color: grey;
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 30%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
  font-size: 50px;
  max-width:200px;
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}

<p class="shimmer">Shimmering Text</p>
<img src="https://i.stack.imgur.com/MeQxk.png"class="shimmer" />

How can I do a CSS3 shimmer animation to an HTML target object?

You can create a diagonal gradient background and slide it from extreme far left to extreme far right on a keyframes timer. Add the following to your CSS file and then add the "shimmer" class to your HTML element. I played with the animation speed using a combination of larger numbers on the background-position-x property in the keyframe, as well as the animation speed (currently 8s) in the animation property of the CSS class.

@keyframes shimmerBackground {
    0% {background-position:-5000px 0}
    100% {background-position:5000px 0}
}

.shimmer
{
background-image: -moz-linear-gradient(160deg, rgba(255,255,255,0) 0%, rgba(255,255,255,0) 25%, rgba(255,255,255,0.85) 60%, rgba(255,255,255,0) 100%);
background-image: -webkit-gradient(linear, left top, right top, color-stop(0%,rgba(255,255,255,0)), color-stop(25%,rgba(255,255,255,0)), color-stop(60%,rgba(255,255,255,0.85)), color-stop(100%,rgba(255,255,255,0)));
background-image: -webkit-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -o-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: -ms-linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-image: linear-gradient(160deg, rgba(255,255,255,0) 0%,rgba(255,255,255,0) 25%,rgba(255,255,255,0.85) 60%,rgba(255,255,255,0) 100%);
background-repeat: repeat-y;
background-position:-5000px 0;
animation: shimmerBackground 8s linear infinite;
}

CSS Shimmer effect with blocking JavaScript

Use transform as suggested in the link. Here is an idea with pseudo element:

.box {
  background-image: linear-gradient(to right, #ebebeb calc(50% - 100px), #c5c5c5 50%, #ebebeb calc(50% + 100px));
  background-size:0;
  height: 200px;
  position:relative;
  overflow:hidden;
}
.box::before {
  content:"";
  position:absolute;
  top:0;
  right:0;
  width:calc(200% + 200px);
  bottom:0;
  background-image:inherit;
  animation:move 2s linear infinite; 
}
@keyframes move{
  to {
    transform:translateX(calc(50% + 100px));
  }
}

<div class="box">

</div>

CSS Synchronous shimmer effect

make the background fixed

.grid {
  gap: 10px;
  display: grid;
  grid-template-columns: repeat(3, 150px);
}

.box {
  height: 150px;
  width: 100%;
}

.shimmerBG {
  animation-duration: 2.2s;
  animation-fill-mode: forwards;
  animation-iteration-count: infinite;
  animation-name: shimmer;
  animation-timing-function: linear;
  background: #ddd;
  background: linear-gradient(to right, #f6f6f6 8%, #f0f0f0 18%, #f6f6f6 33%) fixed;
  background-size: 100vw 100%;
}

@keyframes shimmer {
  0% {
    background-position: -100vw 0;
  }

  100% {
    background-position: 100vw 0;
  }
}

<div class="grid">
  <div class="box shimmerBG"></div>
  <div class="box shimmerBG"></div>
  <div class="box shimmerBG"></div>
  <div class="box shimmerBG"></div>
  <div class="box shimmerBG"></div>
  <div class="box shimmerBG"></div>
</div>

how to change the linear gradient color in shimmer effect

Don't use mask, use background then you can control the color like you want

* {
  box-sizing: border-box;
}

body{
  background-color: black;
}
/* Float four columns side by side */
.column {
  float: left;
  width: 100px;
  padding: 0 10px;
}

/* Remove extra left and right margins, due to padding */
.row {margin: 0 -5px;}

/* Clear floats after the columns */
.row:after {
  content: "";
  display: table;
  clear: both;
}

/* Style the counter cards */
.card {
  height: 150px;
  text-align: center;
  background :linear-gradient(-60deg,#0000 10%,#0005,#0000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
  background-color: #f1f1f1;
}
.shimmer {
  display:inline-block;
  max-width:200px;
}

.starting{
  margin-left: -10px
}

@keyframes shimmer {
  100% {background-position:left}
}

<div class="row">
  <div class="column shimmer starting">
    <div class="card">

    </div>
  </div>

  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
  
  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
  
  <div class="column shimmer">
    <div class="card">

    </div>
  </div>
</div>

---

Related Topics