CSS Tricks
CSS Trick

Light Sweep with Conic Gradient

Create a rotating light beam effect using conic gradients and CSS animation.

#css #animation #gradients #effects

Browser Support

✓ Chrome 85+ ✓ Firefox 91+ ✓ Safari 15.4+ ✗ Edge

Light Sweep Animation

Create a rotating light beam using conic gradients and custom properties.

@property --angle {
  syntax: "<angle>";
  initial-value: 0deg;
  inherits: false;
}


.card .sweep {
  background: conic-gradient(
    from var(--angle),
    transparent 0%,
    rgba(255, 255, 255, 0.3) 10%,
    transparent 20%
  );
  animation: rotate 3s linear infinite;
}


@keyframes rotate {
  to { --angle: 360deg; }
}

Live Demo

Light Sweep
ANIMATED
3s
10%
CSS Code
@property --sweep-angle {
syntax: "<angle>";
initial-value: 0deg;
inherits: false;
}
@keyframes sweep-rotate {
to { --sweep-angle: 360deg; }
}
.sweep-card {
width: 180px;
height: 100px;
position: relative;
border-radius: 0.75rem;
overflow: hidden;
background: linear-gradient(135deg, #312e81, #4c1d95);
}
.sweep-effect {
position: absolute;
inset: 0;
background: conic-gradient(from var(--sweep-angle, 0deg), transparent 0%, rgba(255, 255, 255, 0.5) 10%, transparent calc(10% * 2));
animation: sweep-rotate 3s linear infinite;
}
.sweep-inner {
position: absolute;
inset: 3px;
background: linear-gradient(135deg, #312e81, #4c1d95);
border-radius: 0.625rem;
display: flex;
align-items: center;
justify-content: center;
z-index: 1;
}
.sweep-inner span {
color: white;
font-weight: 600;
font-size: 0.875rem;
}

The inner element with inset: 3px creates the frame that contains the sweep effect.

Share this CSS trick

Comments