how to change the linear gradient color in shimmer effect-CodePudding

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

    </div>
  </div>

  <div >
    <div >

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

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

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

</body>
</html>

here is a link to JSFiddle

CodePudding user response：

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

    </div>
  </div>

  <div >
    <div >

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

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

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