CSS 반짝임 효과 생성기
카드에 대각선으로 흐르는 빛나는 CSS 효과를 만들어보세요
도구를 불러오는 중…
🔒 이 도구는 100% 브라우저에서 처리됩니다. 업로드한 파일과 입력한 내용은 서버로 전송되지 않습니다.
카드나 버튼 위로 빛이 스윽 지나가는 반짝임(Shine) 효과를 슬라이더로 조절하며 미리 보고, 완성된 CSS 코드를 그대로 복사할 수 있는 도구입니다. 프리미엄 카드 디자인이나 강조 버튼을 만들고 싶은 디자이너와 프론트엔드 개발자에게 유용하며, 모든 계산은 브라우저 안에서 즉시 이뤄져 서버로 데이터가 전송되지 않습니다.
사용 방법
- 각도, 속도, 선명도, 빛 색상 슬라이더와 색상 선택기를 조절해 원하는 효과를 만듭니다.
- 미리보기 카드에서 반짝임이 대각선으로 이동하는 모습을 실시간으로 확인합니다.
- 지속 애니메이션 여부를 켜거나 끄고, 필요하면 재생 버튼으로 다시 확인합니다.
- 완성된 CSS 코드를 복사 버튼으로 복사해 원하는 요소(::after)에 붙여넣습니다.
자주 묻는 질문
- 생성된 CSS를 아무 요소에나 적용할 수 있나요?
- 적용하려는 요소에 position: relative와 overflow: hidden을 함께 설정해야 반짝임 그라데이션이 카드 안에서만 보입니다.
- 마우스를 올렸을 때만 반짝이게 할 수 있나요?
- 네, '지속적으로 애니메이션' 체크를 해제하면 hover 시에만 빛이 흐르는 CSS로 바뀝니다.
- 여러 개의 카드에 각각 다른 속도로 적용할 수 있나요?
- 네, 카드마다 클래스명을 다르게 주고 이 도구로 속도·각도 값을 바꿔가며 각각의 CSS를 생성해 적용하면 됩니다.