<div class="repeater"></div>
<div class="repeater repeater--blue"></div>

<!--maybe we have a need for inline style, or don't want another class-->
<div class="repeater" style="background-color: lime"></div>

<!--Any background works-->
<div class="repeater repeater--gradient"></div>

<!--We can change other properties too, not only color-->
<div class="repeater repeater--sized"></div>

<!--Triple the lines to make a type of texture-->
<div class="repeater repeater--textured"></div>

<div class="repeater repeater--animated"></div>
.repeater {
  background-color: red;
  height: 75px;
    Storing in a custom prop so we don't have to repeat it for both the prefixed and unprefixed property below.
  This also works with encoded, inlined svg.
  Example: https://codepen.io/tylergaw/pen/ExjbMEP
  --svg: url("https://tylergaw-assets.s3.amazonaws.com/inline-masks/repeater.svg#squiggle");
  -webkit-mask-image: var(--svg);
  mask-image: var(--svg);

.repeater--blue {
  background-color: blue;

.repeater--gradient {
  background: transparent linear-gradient(90deg, red, purple, blue, green);

.repeater--sized {
  background-color: white;
  height: 18px;

.repeater--textured {
  background: #b97aff;
  --texture-lines: 5;
  --mask-size: calc(250px / var(--texture-lines));
  -webkit-mask-size: var(--mask-size);
  mask-size: var(--mask-size);

@keyframes move {
  to {
    --pos: 100%;
    background: #ff007a;
    -webkit-mask-position: var(--pos);
    mask-position: var(--pos);

.repeater--animated {
  animation: move 0.6s infinite linear alternate;
  background: #7aebff;

/* Demo setup styles */
.repeater + .repeater {
  margin-top: 2rem;

body {
  background-color: #252525;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.