# CSS Light Sweep Animation for Cards without JavaScript

URL: https://theosoti.com/short/featured-card-animation/
Published: 2025-08-11
Author: Theo Soti

> Learn how to create a smooth light sweep effect on cards using only CSS gradients and keyframes. Simple, reusable, and no JavaScript required.

## Ever wondered how to do a light sweep animation?

It’s pretty easy when you understand the logic.
I’ll show you here how to do it for a featured card.

But this can be declined for every components you need.
And no JavaScript needed.
Let's break it down into three key parts:

1- The card itself

Start with a container. Add a child div for the animation.
Style it however you like, but don’t forget `position: relative`. This anchors everything in place.

2- The animation Effect

The rotating light effect uses CSS animations combined with a conic gradient.
The animation layer fills the card with `position: absolute` and `inset: 0`.
Use a custom CSS property to control the rotation value.

It makes the animation flexible and easy to tweak.

Next, define a keyframe to rotate the light beam 360 degrees.
This will create that smooth sweep effect.

3- Superposing the :after element

To make the card complete, we overlay an :after pseudo-element on the effect.
It should sit on top with a slight inset (e.g., 4px) to create a border.
This frames the animation and gives it a polished look.

This approach is simple yet powerful.

With just CSS, you can create a dynamic, visually engaging elements that grabs attention.

Card light-sweep effects should be subtle and purposeful. They work well to indicate interactivity, but avoid constant motion that competes with core content.

Always include reduced-motion behavior. A strong animation pattern is one that degrades cleanly while preserving meaning.

---

If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.

Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!