Design Atlas
한국어
✦ Visual effects

Shine sweep

샤인 스윕

A bright diagonal band of light that sweeps once across a surface — a small dose of life for buttons and cards.

Also known as: Shimmer sweepGlare sweepLight sweep
···
html
<div class="btn">Upgrade to Pro</div>
css
.btn{position:relative;overflow:hidden;padding:16px 34px;border-radius:12px;
  background:linear-gradient(135deg,#2b2b3a,#15151f);color:#fff;font-weight:700;letter-spacing:.02em}
.btn::after{content:"";position:absolute;top:-50%;left:-60%;width:35%;height:220%;
  background:linear-gradient(75deg,transparent,rgba(255,255,255,.55),transparent);
  animation:sweep 3.2s ease-in-out infinite}
@keyframes sweep{0%{left:-60%}30%,100%{left:140%}}

Create a narrow, tilted white gradient band over the element and move it from off-screen left to off-screen right, clipped by an overflow: hidden parent.

It looks like the skeleton-loading shimmer but serves a different purpose — shimmer repeats to signal "still loading," while shine-sweep is decorative gloss on an already-rendered surface, playing on hover or every few seconds.

When to use

Use sparingly on premium badges or a CTA button. Repeating too often is distracting — trigger it once on hover, or space it out (5s+).