CSS 반짝임 효과, 빛이 대각선으로 지나가는 원리
프리미엄한 느낌을 주는 카드나 버튼 위로 빛줄기가 대각선으로 스윽 지나가는 효과를 웹사이트에서 자주 보셨을 것입니다. 겉보기엔 복잡해 보이지만 이미지나 자바스크립트 라이브러리 없이 CSS 그라데이션과 가상 요소만으로 만들어집니다. 원리를 알면 각도·속도·색상을 원하는 대로 바꿔가며 직접 구현할 수 있습니다.
요약 ① 반짝임은 사진이 아니라 좁은 흰색 그라데이션 띠가 카드 위를 가로지르며 움직이는 애니메이션입니다 ② 띠가 대각선으로 보이는 이유는 이동 방향이 아니라 그라데이션 자체의 각도(angle) 값 때문입니다 ③ 카드보다 훨씬 큰 가상 요소를 만들고 overflow: hidden으로 잘라내야 모서리까지 빈틈없이 지나갑니다
카드 위 빛줄기, 원리를 모르면 왜 헷갈릴까
겉모습만 보고 따라 만들려 하면 흔히 배경 위치(background-position)를 애니메이션하거나, 요소 자체를 회전시켜서 흉내 내려 합니다. 이렇게 하면 띠가 카드 모서리에서 부자연스럽게 끊기거나, 각도를 조금만 바꿔도 좌표를 처음부터 다시 맞춰야 하는 문제가 생깁니다.
실제 반짝임 효과는 요소가 대각선으로 이동하는 게 아니라, 좌우로만 움직이는 요소 안에 이미 대각선으로 기울어진 그라데이션 띠가 들어 있는 구조입니다. 이 구분을 모르면 각도값을 45도에서 30도로만 바꿔도 왜 띠가 카드 밖으로 새어 보이는지 알기 어렵습니다.
확인하는 방법 — 그라데이션 띠를 대각선으로 움직이는 원리
반짝임 효과는 몇 가지 요소가 합쳐져서 만들어집니다. 하나씩 뜯어보면 각도나 속도를 바꿨을 때 결과가 왜 달라지는지도 함께 이해할 수 있습니다.
좁은 그라데이션 띠 먼저 만들기
카드 안에 보이지 않는 가상 요소(::after)를 하나 더 만들고, 여기에 투명-흰색-투명 순서로 이어지는 선형 그라데이션(linear-gradient)을 배경으로 넣습니다. 색상 정지점(stop)을 30%-50%-70%처럼 좁게 잡으면 전체가 아니라 가운데 부분만 밝은 좁은 띠 모양이 됩니다.
각도값이 기울기를 결정합니다
그라데이션에 각도(angle)를 45도처럼 지정하면 이 띠 자체가 왼쪽 위에서 오른쪽 아래로 비스듬히 기울어진 모양이 됩니다. 각도가 0도에 가까우면 세로 줄무늬, 90도에 가까우면 가로 줄무늬에 가까워지고, 이동 방향과는 무관하게 각도값만으로 기울기가 정해집니다.
카드보다 크게 만들어 좌우로 움직이기
가상 요소를 카드보다 훨씬 크게(가로 300%, 세로 200% 정도) 만들고, 카드 왼쪽 바깥(-150%)에서 오른쪽 바깥(150%)까지 위치(left)를 애니메이션합니다. 요소가 카드와 똑같은 크기라면 이동 중 네 모서리 중 일부를 띠가 완전히 덮지 못해 삼각형 모양의 빈틈이 생깁니다.
카드보다 크게 만들어야 대각선으로 기울어진 띠가 이동하는 내내 카드 전체를 빈틈없이 가로지릅니다.
overflow: hidden으로 감싸기
마지막으로 카드 자체에는 position: relative와 overflow: hidden을 지정합니다. overflow: hidden이 없으면 카드보다 큰 가상 요소가 카드 밖으로 삐져나와 보이고, position: relative가 없으면 가상 요소가 카드가 아니라 페이지 전체를 기준으로 움직입니다.
저희 도구로 확인하기. 각도·속도·선명도·색상을 슬라이더로 직접 조절하면서 띠가 카드 위를 지나가는 모습을 실시간으로 보고, 완성된 CSS 코드를 그대로 복사할 수 있습니다.
무료 · 가입 불필요 · 슬라이더로 미리 보고 CSS 코드 바로 복사
자주 막히는 지점
| 상황 | 원인 |
|---|---|
| 빛줄기가 카드 모서리 밖으로 삐져나와 보임 | 카드(부모) 요소에 overflow: hidden이 빠져 있음 |
| 이동 중 코너에 삼각형 모양 빈틈이 생김 | 가상 요소 크기가 카드와 비슷하거나 300%/200%보다 작게 설정됨 |
| 반짝임이 카드가 아니라 화면 전체를 기준으로 움직임 | 부모 요소에 position: relative가 빠져 있음 |
| 마우스를 올려도 반짝임이 안 보임 | 호버 전용(transition) 방식인데 지속 애니메이션(@keyframes)과 섞어서 설정함 |
표에 정리된 문제 대부분은 가상 요소의 크기·위치, 그리고 부모 요소의 overflow: hidden 여부를 확인하는 것만으로 해결됩니다.
정리
카드나 버튼 위를 스치는 반짝임 효과는 실제 빛이 아니라, 좁은 그라데이션 띠를 담은 가상 요소가 카드보다 넓은 범위를 좌우로 이동하는 애니메이션입니다. 띠가 대각선으로 보이는 이유는 이동 방향이 아니라 그라데이션의 각도값 때문입니다.
각도·속도·투명도 값을 하나씩 바꿔보면서 결과가 어떻게 달라지는지 확인하면, 원하는 느낌의 CSS 코드를 직접 조합할 수 있습니다.
무료 · 가입 불필요 · 슬라이더로 미리 보고 CSS 코드 바로 복사
자주 묻는 질문
각도(angle) 값을 바꾸면 빛줄기 방향도 바뀌나요?
네. 그라데이션의 각도값이 커질수록 띠가 더 가파르게 기울어집니다. 0도에 가까우면 세로 줄무늬처럼, 90도에 가까우면 가로 줄무늬처럼 보이고, 일반적으로 45도 전후를 쓰면 왼쪽 위에서 오른쪽 아래로 흐르는 느낌이 자연스럽습니다.
마우스를 올렸을 때만 반짝이게 할 수 있나요?
가능합니다. 지속 애니메이션(@keyframes) 대신 호버 상태에서 가상 요소의 위치(left) 값을 transition으로 바꾸는 방식을 쓰면 됩니다. 평소에는 카드 바깥에 숨어 있다가 마우스를 올렸을 때만 한 번 지나갑니다.
반짝임이 너무 흐릿하거나 아예 안 보여요, 왜 그런가요?
그라데이션의 투명도 값이 너무 낮거나, 카드 배경색과 빛 색상이 비슷한 경우입니다. 어두운 배경 카드에는 흰색 계열, 밝은 배경 카드에는 대비되는 색을 쓰면 눈에 훨씬 잘 띕니다.