how to change the linear gradient color in shimmer effect

Question

this might be a silly question, but I'm unable to figure this out.

I need to show shimmer on cards as a placeholder till the actual content is loaded. I have used the CSS from this answer, when I applied a dark background, the color of diagonal shimmer changes to black whereas I want the same color as shown in the linked answer. The color of the diagonal shimmer is based on the background color of the page somehow.

here is the code

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
* {
  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-color: #f1f1f1;
}
.shimmer {
  display:inline-block;
  -webkit-mask:linear-gradient(-60deg,#000 10%,#0005,#000 70%) right/300% 100%;
  background-repeat: no-repeat;
  animation: shimmer 2.5s infinite;
  max-width:200px;
}

.starting{
  margin-left: -10px
}

@keyframes shimmer {
  100% {-webkit-mask-position:left}
}
</style>
</head>
<body>

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

</body>
</html>

here is a link to JSFiddle

the linked answer uses mask which means it makes the element transparent to see whataver behind it. It behaves like opacity. Don't use mask if you want to control the color but use background — Temani Afif, Jul 19 '22 at 09:01
@TemaniAfif thanks for the heads up. I'm a rookie when it comes to CSS. I tried the following code but it didn't work. can you please post an answer or comment -webkit-mask-image: linear-gradient(-60deg,#000 10%,#0005,#000 70%) right/300% 100%; mask-image: linear-gradient(-60deg,#000 10%,#0005,#000 70%) right/300% 100%; — Sahil Manchanda, Jul 19 '22 at 09:22

score 1 · Accepted Answer · answered Jul 19 '22 at 09:44

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>

how to change the linear gradient color in shimmer effect

1 Answers1