Create 3 Stunning Sweep Light Effects Using Pure CSS

CSS Sweep‑Light Principle

All sweep‑light effects are built from a basic left‑to‑right infinite translation animation. The moving highlight can be created with either transform or background-position. A 45° linear gradient draws the diagonal light strip.

background: linear-gradient(45deg,
  rgba(255,255,255,0) 40%,
  rgba(255,255,255,0.7),
  rgba(255,255,255,0) 60%);

1. Text Sweep‑Light

Apply the gradient to the text color using background-clip: text. The text itself must be transparent with -webkit-text-fill-color: transparent so the background shows through. The animation changes background-position from -100% to 200%.

.shark-txt {
  -webkit-text-fill-color: transparent;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.7), rgba(255,255,255,0) 60%) -100%/50% no-repeat currentColor;
  -webkit-background-clip: text;
  animation: shark-txt 2s infinite;
}
@keyframes shark-txt {
  from { background-position: -100%; }
  to   { background-position: 200%; }
}

2. Card Container Sweep‑Light

Because the container holds other elements, the gradient is placed on a pseudo‑element ( ::after) that sits behind the content. The pseudo‑element is animated with transform: translateX() and the container hides overflow.

.shark-wrap::after {
  content: '';
  position: absolute;
  inset: -20%;
  background: linear-gradient(45deg, rgba(255,255,255,0) 40%,
    rgba(255,255,255,0.7), rgba(255,255,255,0) 60%);
  animation: shark-wrap 2s infinite;
  transform: translateX(-100%);
}
@keyframes shark-wrap { to { transform: translateX(100%); } }
.shark-wrap { overflow: hidden; }

3. Irregular Image Sweep‑Light

For non‑rectangular images, overflow:hidden cannot clip the light correctly. Using CSS mask, the image itself becomes the mask, allowing the sweep‑light to appear only inside the shape.

<div class="shark-wrap" style="-webkit-mask: url(https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png) 0 0/100% no-repeat;">
  <img class="logo" src="https://imgservices-1252317822.image.myqcloud.com/coco/s09252023/3af9e8de.00uqxe.png">
</div>

Summary

Sweep‑light styles are created with a linear‑gradient.

The animation is a simple horizontal translation.

Text sweep‑light uses background‑clip: text and transparent fill.

When the background size equals the container size, percentage‑based background‑position has no effect.

Container sweep‑light requires a pseudo‑element to avoid covering inner elements.

The pseudo‑element animation uses transform.

Irregular shapes are handled with CSS mask to clip the light.

All demos are available at the linked CodePen and Juejin examples.