🖱️ 호버 인터랙션 CSS 생성기 | 변화값 골라 코드 복사

대상 선택자

호버 시 가로 이동

호버 시 세로 이동 (음수는 위로)

호버 시 확대 배율 (scale)

배

호버 시 회전

deg

기본 글자색 (HEX)

호버 글자색 (HEX)

기본 배경색 (HEX)

호버 배경색 (HEX)

호버 그림자 세로 오프셋

호버 그림자 흐림

호버 그림자 불투명도

전환 지속시간 (직접 입력)

전환 타이밍 함수

동작 줄이기 대응 블록

붙여 쓸 CSS

호버 변화값을 CSS 규칙으로 옮기는 방법

마우스를 올렸을 때의 변화는 기본 상태와 호버 상태를 따로 적고 그 사이를 transition 으로 잇는 구조입니다. 이 생성기는 이동·확대·회전·글자색·배경색·그림자 변화값을 받아 기본 규칙, 호버 규칙, 전환 선언을 한 묶음으로 만들어 줍니다. 미리보기 카드에 실제로 마우스를 올려 움직임을 확인할 수 있습니다.

출력은 W3C CSS Transitions 와 Transforms 규격의 속성 이름을 그대로 씁니다. 호버에만 의지하면 키보드 사용자가 상태를 알 수 없으므로 focus-visible 을 같은 규칙에 함께 적고, 동작 줄이기 설정을 켠 사용자를 위한 prefers-reduced-motion 블록을 선택적으로 붙입니다. 2026년 10월 기준 표기입니다.

이 도구는 권장 지속시간이나 권장 이징을 제시하지 않습니다. 적정값은 요소 크기와 이동 거리에 따라 달라지고 공인된 기준표가 없기 때문입니다. 키프레임 애니메이션과 클릭 리플 효과는 지원하지 않으며, 선택자는 클래스·아이디·태그 하나만 받습니다.

자주 묻는 질문

권장 지속시간을 알려주지 않는 이유가 뭔가요?

적정 지속시간은 이동 거리와 요소 크기, 제품 성격에 따라 달라집니다. 이 도구는 값을 추천하지 않고 입력한 지속시간을 그대로 코드에 넣습니다.

왜 focus-visible 선택자가 함께 붙나요?

마우스가 없는 키보드 사용자와 터치 기기에서는 hover 가 발생하지 않습니다. 같은 변화를 focus-visible 에도 걸어 두면 키보드로 이동할 때도 상태가 보입니다.

reduced-motion 블록은 무엇을 하나요?

운영체제에서 동작 줄이기를 켠 사용자에게는 transform 과 transition 을 끄는 블록입니다. 색 변화는 남겨 두어 상태는 계속 구분됩니다.

🖱️CSS 호버 인터랙션 효과 코드 생성기

관련된 도구

CSS transition 코드 생성기

CSS transform 회전·크기 코드 생성기

호버 변화값을 CSS 규칙으로 옮기는 방법

자주 묻는 질문

관련된 도구

CSS transition 코드 생성기

CSS transform 회전·크기 코드 생성기

호버 변화값을 CSS 규칙으로 옮기는 방법

자주 묻는 질문

같은 카테고리 도구